diff --git a/crates/app/src/public/css/style.css b/crates/app/src/public/css/style.css
index 45f6edb..d458df1 100644
--- a/crates/app/src/public/css/style.css
+++ b/crates/app/src/public/css/style.css
@@ -160,6 +160,10 @@ article {
     .name.shorter {
         max-width: 180px;
     }
+
+    .name.lg\:long {
+        max-width: unset;
+    }
 }
 
 ul,
diff --git a/crates/app/src/public/html/communities/base.html b/crates/app/src/public/html/communities/base.html
index 50af07a..f52c898 100644
--- a/crates/app/src/public/html/communities/base.html
+++ b/crates/app/src/public/html/communities/base.html
@@ -8,7 +8,7 @@
         <div class="w-full flex gap-4 flex-collapse">
             <div
                 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 flex gap-2" id="community_avatar_and_name">
@@ -57,7 +57,7 @@
                     </div>
 
                     {% 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
                         is_pending %}
                         <button class="primary" onclick="join_community()">
diff --git a/crates/app/src/public/html/components.html b/crates/app/src/public/html/components.html
index 8fc087c..a2d869e 100644
--- a/crates/app/src/public/html/components.html
+++ b/crates/app/src/public/html/components.html
@@ -57,7 +57,7 @@ community %}
     {{ components::community_avatar(id=community.id, community=community,
     size="48px") }}
     <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>
     </div>
 </a>
diff --git a/crates/app/src/public/html/profile/base.html b/crates/app/src/public/html/profile/base.html
index e806aad..812cbbf 100644
--- a/crates/app/src/public/html/profile/base.html
+++ b/crates/app/src/public/html/profile/base.html
@@ -8,7 +8,7 @@
         <div class="w-full flex gap-4 flex-collapse">
             <div
                 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 flex gap-2" id="user_avatar_and_name">