fix(ui): community/profile sidebar sizing

This commit is contained in:
trisua 2025-04-03 17:51:31 -04:00
parent 573b10f5e1
commit 1a2efdba1f
4 changed files with 8 additions and 4 deletions

View file

@ -160,6 +160,10 @@ article {
.name.shorter { .name.shorter {
max-width: 180px; max-width: 180px;
} }
.name.lg\:long {
max-width: unset;
}
} }
ul, ul,

View file

@ -8,7 +8,7 @@
<div class="w-full flex gap-4 flex-collapse"> <div class="w-full flex gap-4 flex-collapse">
<div <div
class="lhs flex flex-col gap-2 sm:w-full" class="lhs flex flex-col gap-2 sm:w-full"
style="min-width: 20rem" style="width: 20rem; min-width: 20rem"
> >
<div class="card-nest w-full"> <div class="card-nest w-full">
<div class="card flex gap-2" id="community_avatar_and_name"> <div class="card flex gap-2" id="community_avatar_and_name">
@ -57,7 +57,7 @@
</div> </div>
{% if user %} {% if user %}
<div class="card flex" id="join_or_leave"> <div class="card flex gap-2" id="join_or_leave">
{% if not is_owner %} {% if not is_joined %} {% if not {% if not is_owner %} {% if not is_joined %} {% if not
is_pending %} is_pending %}
<button class="primary" onclick="join_community()"> <button class="primary" onclick="join_community()">

View file

@ -57,7 +57,7 @@ community %}
{{ components::community_avatar(id=community.id, community=community, {{ components::community_avatar(id=community.id, community=community,
size="48px") }} size="48px") }}
<div class="flex flex-col"> <div class="flex flex-col">
<h3 class="name">{{ community.context.display_name }}</h3> <h3 class="name lg:long">{{ community.context.display_name }}</h3>
<span class="fade"><b>{{ community.member_count }}</b> members</span> <span class="fade"><b>{{ community.member_count }}</b> members</span>
</div> </div>
</a> </a>

View file

@ -8,7 +8,7 @@
<div class="w-full flex gap-4 flex-collapse"> <div class="w-full flex gap-4 flex-collapse">
<div <div
class="lhs flex flex-col gap-2 sm:w-full" class="lhs flex flex-col gap-2 sm:w-full"
style="min-width: 20rem" style="width: 20rem; min-width: 20rem"
> >
<div class="card-nest w-full"> <div class="card-nest w-full">
<div class="card flex gap-2" id="user_avatar_and_name"> <div class="card flex gap-2" id="user_avatar_and_name">