diff --git a/crates/app/src/public/css/style.css b/crates/app/src/public/css/style.css
index a62976e..45f6edb 100644
--- a/crates/app/src/public/css/style.css
+++ b/crates/app/src/public/css/style.css
@@ -149,6 +149,19 @@ article {
 }
 
 /* typo */
+.name {
+    max-width: 200px;
+    overflow: hidden;
+    overflow-wrap: break-word;
+    text-overflow: ellipsis;
+}
+
+@media screen and (min-width: 901px) {
+    .name.shorter {
+        max-width: 180px;
+    }
+}
+
 ul,
 ol {
     margin-left: 1rem;
diff --git a/crates/app/src/public/html/communities/base.html b/crates/app/src/public/html/communities/base.html
index 838ca69..50af07a 100644
--- a/crates/app/src/public/html/communities/base.html
+++ b/crates/app/src/public/html/communities/base.html
@@ -16,7 +16,7 @@
                         community=community, size="72px") }}
                         <div class="flex flex-col">
                             <div class="flex gap-2 items-center">
-                                <h3 id="title" class="title">
+                                <h3 id="title" class="title name shorter">
                                     <!-- prettier-ignore -->
                                     {% if community.context.display_name %}
                                         {{ community.context.display_name }}
@@ -36,7 +36,7 @@
                                         {{ icon "ellipsis" }}
                                     </button>
 
-                                    <div class="inner left">
+                                    <div class="inner">
                                         <button
                                             class="red"
                                             onclick="trigger('me::report', ['{{ community.id }}', 'community'])"
diff --git a/crates/app/src/public/html/communities/settings.html b/crates/app/src/public/html/communities/settings.html
index ec34065..0901084 100644
--- a/crates/app/src/public/html/communities/settings.html
+++ b/crates/app/src/public/html/communities/settings.html
@@ -438,6 +438,16 @@
                         null,
                         {
                             role: (new_role) => {
+                                const [matching, _] =
+                                    all_matching_permissions(new_role);
+
+                                document.getElementById(
+                                    "permissions",
+                                ).innerHTML = get_permissions_html(
+                                    rebuild_role(matching),
+                                    "permissions",
+                                );
+
                                 return update_user_role(
                                     e.target.uid.value,
                                     new_role,
diff --git a/crates/app/src/public/html/components.html b/crates/app/src/public/html/components.html
index 251a337..8fc087c 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>{{ community.context.display_name }}</h3>
+        <h3 class="name">{{ community.context.display_name }}</h3>
         <span class="fade"><b>{{ community.member_count }}</b> members</span>
     </div>
 </a>
@@ -132,7 +132,9 @@ show_community %}
 
             <div class="flex flex-col w-full gap-1">
                 <div class="flex flex-wrap gap-2 items-center">
-                    {{ components::full_username(user=owner) }}
+                    <span class="name"
+                        >{{ components::full_username(user=owner) }}</span
+                    >
 
                     <span class="fade date">{{ post.created }}</span>
 
diff --git a/crates/app/src/public/html/profile/base.html b/crates/app/src/public/html/profile/base.html
index 3484347..e806aad 100644
--- a/crates/app/src/public/html/profile/base.html
+++ b/crates/app/src/public/html/profile/base.html
@@ -18,7 +18,7 @@
                         <div class="flex flex-col">
                             <!-- prettier-ignore -->
                             <h3 id="username" class="username flex items-center gap-2">
-                                {{ components::username(user=profile) }}
+                                <span class="name shorter">{{ components::username(user=profile) }}</span>
 
                                 {% if profile.is_verified %}
                                 <span title="Verified" style="color: var(--color-primary);" class="flex items-center">
diff --git a/crates/app/src/public/js/atto.js b/crates/app/src/public/js/atto.js
index c1bc968..0e3f751 100644
--- a/crates/app/src/public/js/atto.js
+++ b/crates/app/src/public/js/atto.js
@@ -262,7 +262,7 @@ media_theme_pref();
                 const height = parent_height;
                 const y = box.y + scroll;
 
-                if (y > height - scroll - 300) {
+                if (y > height - scroll - 375) {
                     dropdown.classList.add("top");
                 } else {
                     dropdown.classList.remove("top");