fix(community): Group Details title overflow + description edit pencil

- The overview title now single-line-ellipsizes (cutoff + max-width) — a long
  name was widening the whole app into a horizontal scroll. Name length caps
  at 32 in both editors (inline rename + create-group input).
- The description's edit pencil flows inline at the end of the text instead
  of the shared absolute mid-height anchor, which floated it mid-paragraph on
  tall blocks (and pinning outside the box just got clipped by the span's
  overflow).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: JSKitty

src/index.html

@@ -864,7 +864,7 @@ <h3 id="group-overview-name" class="cutoff chat-contact-with-status btn"></h3>
       <span id="group-overview-avatar" class="icon icon-chat-circle" style="width: 100px; height: 100px; border-radius: initial; display: inline-block;"></span>
     </div>
     <div style="padding-bottom: 75px;">
-      <h3 id="group-overview-secondary-name" class="chat-contact-with-status btn"></h3>
+      <h3 id="group-overview-secondary-name" class="chat-contact-with-status btn cutoff" style="max-width: 90%; margin-left: auto; margin-right: auto;"></h3>
       <span id="group-overview-description" class="chat-contact-status" style="width: 90%; white-space: pre-line; overflow-y: auto; max-height: 225px; font-style: normal; margin-top: 10px;"></span>
       <div style="margin-top: 40px; width: 90%; margin-left: auto; margin-right: auto;">
         <div style="display: flex; justify-content: center; margin-bottom: 10px;">
@@ -1057,7 +1057,7 @@ <h2 class="chat-new-title"><span class="icon icon-chats chat-new-icon" style="wi
                   <span id="create-group-avatar-edit-icon" class="icon icon-plus-circle"></span>
                 </div>
               </div>
-              <input id="create-group-name" placeholder="Group name..." class="chat-input-container chat-new-input" />
+              <input id="create-group-name" placeholder="Group name..." maxlength="32" class="chat-input-container chat-new-input" />
             </div>
             <div style="padding: 0 15px; margin-top: 8px;">
               <textarea id="create-group-description" placeholder="Group description (optional)" class="create-group-description" rows="2"></textarea>

src/main.js

@@ -7820,7 +7820,7 @@ async function renderCommunityOverview(chat, preserveSearch = false) {
         domGroupOverviewNameSecondary.classList.add('group-editable');
         domGroupOverviewNameSecondary.onclick = () => {
             const input = document.createElement('input');
-            input.type = 'text'; input.className = 'group-name-input'; input.value = name; input.maxLength = 100;
+            input.type = 'text'; input.className = 'group-name-input'; input.value = name; input.maxLength = 32;
             domGroupOverviewNameSecondary.replaceWith(input);
             input.focus(); input.select();
             let saved = false;

src/styles.css

@@ -10308,6 +10308,15 @@ select:disabled:hover {
 .group-editable:hover::after {
   opacity: 0.6;
 }
+/* Multi-line description: the shared pencil's mid-height absolute anchor floats it
+   mid-paragraph on a tall block (and the span's overflow clips any outside pin) —
+   let it FLOW inline instead, landing right after the last character of the text. */
+#group-overview-description.group-editable::after {
+  position: static;
+  display: inline-block;
+  transform: none;
+  vertical-align: -1px;
+}
 .group-desc-empty {
   color: rgba(255, 255, 255, 0.35) !important;
   font-style: italic !important;