fix: improve invite UI on mobile

This commit is contained in:
Andy Burke 2025-10-08 19:21:47 -07:00
parent 8337f81b85
commit 83689f2ebd

View file

@ -156,13 +156,13 @@
opacity: 1; opacity: 1;
display: block; display: block;
position: absolute; position: absolute;
top: 0.9rem; top: 0.1rem;
right: -2.5rem; right: -2rem;
cursor: pointer; cursor: pointer;
transition: all ease-in-out 0.33s; transition: all ease-in-out 0.33s;
background: rgba(128, 128, 128, 0.5); background: rgba(128, 128, 128, 0.5);
border-radius: 0 1rem 1rem 0; border-radius: 0 1rem 1rem 0;
padding: 0.5rem; padding: 0.25rem;
} }
#sidebar .icon { #sidebar .icon {
@ -234,6 +234,7 @@
border: 1px solid var(--border-normal); border: 1px solid var(--border-normal);
border-radius: var(--border-radius); border-radius: var(--border-radius);
padding: 1rem; padding: 1rem;
max-width: 90%;
} }
.invitepopover .share-option .name { .invitepopover .share-option .name {
@ -259,7 +260,8 @@
border-radius: var(--border-radius); border-radius: var(--border-radius);
box-shadow: none; box-shadow: none;
font-size: large; font-size: large;
width: 15rem; width: 100%;
max-width: 16rem;
} }
.invitepopover .share-option button { .invitepopover .share-option button {
@ -269,6 +271,24 @@
border-radius: var(--border-radius); border-radius: var(--border-radius);
margin-left: -0.75rem; margin-left: -0.75rem;
} }
@media screen and (max-width: 1200px) {
.invitepopover {
margin: 0;
padding: 0.5rem;
}
.invitepopover .share-option .name {
display: block;
text-align: center;
margin-bottom: 1rem;
}
.invitepopover .share-option button {
display: block;
margin: 0 auto 1rem;
}
}
</style> </style>
<div id="sidebar"> <div id="sidebar">