Keep the channel list aligned and prevent sidebar overlap #333

Activity

1. Sythos

   self-assigned this

   on Oct 16, 2026
2. Sythos

   added

   bugSomething isn't workingSomething isn't working

   on Oct 16, 2026
3. Sythos commented on Oct 16, 2026

   

   Sythos

   on Oct 16, 2026

   Last edited by Sythos

   OwnerAuthor

   More actions

   additiona screenshots:

   

   ---

   Fix guide for the workers

   This guide gives the facts and the steps to fix the issue for good. The facts come from the code at commit f9394449. Line numbers are for that commit and for crates/cordiale-ui/ui/appwindow.slint, unless a file name is given. Lines move, so search for the names.

   What the screenshots show

   • Screenshot 1: all [X] buttons are in one column, except the one in the selected row ● #worldofmedia. That [X] moves right. The list clips it, and only a dark part stays visible.
   • Screenshot 2: the fifth top icon (Disconnect) is in the chat area, outside the sidebar. The first four icons are inside the sidebar.
   • Screenshot 2: the chat column looks narrower than the 240 px minimum in the code. The picture can be cropped at the right, so this point is not certain.
   • The network row and the "Channels" entry start at other left edges than the channel rows. This is by design (toggle button and indent). Do not change it.

   Verified causes

   1. The row label has no width limit. The label Button of a channel row and of a query row has horizontal-stretch: 1. It has no maximum width and no elision (lines 3263-3283 and 3316-3324). A long name, an emoji or the ● bullet makes the row wider. The cells after the label then move. The [X] buttons line up only while all labels fit.
   2. Some rows get an extra 28 px cell. For an authoritative read count of zero, unread_message_count_labels (crates/cordiale-ui/src/main.rs, lines 7164-7170) returns an empty count and a non-empty description. The row condition tests the description (lines 3286 and 3326). Slint then adds an empty Text with min-width: 28px and 4 px spacing. That row is 32 px wider than the others. With the ● prefix, its [X] lands near x=203. The list clips it near x=211. This is screenshot 1.
   3. The width probe is incomplete. widest_sidebar_label (main.rs, lines 9156-9189) builds the text for sidebar-label-probe. It includes the invite marker, the mention badge, the ↳ query prefix and an estimate for the network row. It does not include the ● bullet (lines 3267 and 3318) or the unread cell (lines 3286 and 3326). It uses the raw connection label, not the translated one. It picks the longest text by character count, not by pixel width. The fixed + 90px in sidebar-min-width (line 1326) covers the indent, the spacing, the [X] button, the scrollbar gutter and the box padding. It never counts the unread cell.
   4. The icon row constant is wrong. sidebar-icons-min-width (line 1323) assumes five cells of 32 px, 4 px spacing and 12 px padding, which gives 200 px. The style box padding is 8 px. An icon button is about 44 px wide with an emoji glyph (this is inferred from the screenshot, where the icon pitch is about 48 px). The row has 4 or 5 icons, because if is-admin (line 3046) hides one.
   5. Only the drag is limited. The limits sidebar-max-width and members-max-width (lines 1339-1344) are used only in the moved handler of ResizeHandle (lines 419-425). Nothing limits sidebar-width or members-width again when the window shrinks or when the probe grows. The real widths (lines 3032 and 4191) are max(stored, min) with no upper limit.
   6. The window has no minimum width. The window sets only preferred-width: 900 and preferred-height: 600 (lines 911-912). The constants imply a minimum of about 640 px (200 + about 125 + 240 + 76). chat-min-width is used only inside the drag limits, not as a layout constraint. No changed width handler exists.
   7. History. Issue Keep the Disconnect button inside the left sidebar #257 (PR Fix: Keep the Disconnect button inside the left sidebar #261) added the icon width constant. Issue Stop the sidebar resize handle before it covers Disconnect #290 (PR Fix: Stop the sidebar resize handle before it covers Disconnect #303) added the drag limit formulas. One commit made the column widths read the window width. It was reverted because of a binding loop. No earlier fix covers a shrinking window, a window minimum or the row layout. This is why the problem returns.

   Required fix

   Do all steps in one pull request.

   1. Make the row alignment true by construction. Replace the label Button of channel rows and query rows with a small local component. Use a Rectangle, a TouchArea and a Text with overflow: elide. Set min-width: 0px and horizontal-stretch: 1. The existing NavButton (lines 740-780) is a good model. Keep the accessible role, the accessible label, the default action, the keyboard focus, the primary colour and the opacity for failed and kicked rows. The label must never change the minimum width of the row.
   2. Make the trailing cells constant. Use one fixed width for the unread cell and one fixed width (28 px) for the [X] cell. Reserve both cells in every row. Use an empty Rectangle when a cell has no content. Also test the count text (unread-count), not the description, so an authoritative zero does not create an empty cell.
   3. Make the sidebar minimum correct. Build sidebar-min-width from named constants: indent 16, spacing 4, unread cell, [X] cell, scrollbar gutter and box padding. Remove the 90px magic number. Count the ● bullet and the unread cell in the probe text or in the constants. Never let the minimum exceed sidebar-max-width (360 px). After step 1, a name that is too long shows … and does not widen the sidebar.
   4. Replace sidebar-icons-min-width with a measured value. Add a hidden probe row at the root, like sidebar-label-probe (lines 2615-2630). Put the same icon buttons in it, with the same is-admin condition. Read its preferred-width and add the real box padding. Also give TopMenuButton a real root size of 32 px by 32 px, and set the sidebar box padding to an explicit value. Then the arithmetic is true. The row has 3 or 4 icons after Disconnect leaves it.
   5. Add a window minimum width. Set min-width to sidebar-min-width + members-min-width + chat-min-width + layout-fixed-width. These values depend on probes and constants, not on the window width, so no loop occurs. Also give the chat column and the directory view a real min-width: chat-min-width. Check that the minimum works on Windows, macOS and Linux.
   6. Limit the stored widths again. Write one function fit-columns that does this: shrink the member column to its minimum first, then the sidebar to its minimum, and never go below a minimum. Call it from changed width, from changed sidebar-min-width, from changed members-min-width and after each drag. Keep the drag limit in ResizeHandle. Put the arithmetic in a pure function, and call it through a pure callback if that makes it simpler (see the Tests section).
   7. Move Disconnect. Remove the sidebar button (lines 3073-3082) and its focus-name entries (lines 3087-3092). Add a card to the Home pane (the ScrollView at line 3577), after the Networks card (line 3735). Put a button in it that calls disconnect-requested(). Reuse the existing text "Disconnect". The Home pane already has a Disconnect button for each network (lines 3689-3696). That button disconnects one network, not the account. Give the new card a clear title, or add a short explanatory text, so the two do not look the same. A new title is a new user-visible string (see the translation rules below).

   Do not

   • Do not read root.width in a width: binding of a column. This causes a binding loop (see history, point 7). Read it only in handlers, such as moved and changed width.
   • Do not fix the problem with a bigger magic number. Do not hide it with clipping.
   • Do not change what the disconnect-requested callback does. Other code uses it: the Actions menu "Switch account" (line 4280), Settings > Connection (line 4555), the /quit command (crates/cordiale-ui/src/slash.rs, line 409) and the session-severed path in main.rs. The handler is in crates/cordiale-ui/src/ui_callbacks.rs (lines 406-446).
   • Do not change the left edges of the network row and of the "Channels" entry.

   Translation rules

   A new or changed user-visible string needs @tr with the context AppWindow. Add the string to the four files crates/cordiale-ui/lang/{it,fr,de,es}/LC_MESSAGES/cordiale-ui.po. Use the informal form: tu (it), tu (fr), du (de), tú (es). Reuse the existing msgid "Disconnect" where possible.

   Tests

   • The existing test widest_sidebar_label_picks_the_longest_row (crates/cordiale-ui/src/tests.rs, lines 4599-4624) checks the probe text. Update it if you change the probe text.
   • No Slint layout test or screenshot test exists in this repository. Add the column rule as a pure Rust function: requested width, minimum and maximum in, fitted width out. Add the fit-columns rule as a pure function too. Register them as pure callbacks in ui_callbacks.rs, as cleartext-key (line 970) and passkey-origin-valid (line 1535) do. Write unit tests in tests.rs. Cover the minimum, the maximum, a window that shrinks and a minimum above the maximum.
   • Run formatting, clippy with warnings as errors, and the tests before you open the pull request. The CI runs the same checks on Linux, Windows and macOS.
   • Write the result of the hand tests below in the pull request.

   Hand tests

   1. Use a short name, a 40-character name, a name with emoji or wide glyphs, and a name with a mention badge. Test selected and not selected rows, and channel, query, invited, failed and kicked rows. Every [X] button must be in one column. A long label must end with ….
   2. Test a selected channel with an authoritative read count of zero, and a channel with no counts. No extra gap must appear.
   3. Test unread counts of 0, 5 and 1234 on a long name. The badge must be visible, and the [X] button must stay aligned.
   4. Test an admin account and a normal account. All icons must stay inside the sidebar at its minimum width. Test with font scale 150% and with each of the four languages.
   5. Drag the sidebar handle to the minimum and to the maximum, with the member column at its minimum and at 320 px. The handle must never enter the chat or cover a control. Repeat for the member column handle.
   6. Shrink the window after a wide drag, down to the window minimum. The columns must fit again. The chat must keep its minimum. Nothing must overlap. Test maximize, restore and snap to half of the screen.
   7. Add a long channel while the window is at its minimum. The sidebar must not push the chat or the member column out of the window.
   8. Show the invite banner, a file transfer offer and the recover banner with the narrowest sidebar. All buttons must stay inside the sidebar.
   9. Open the Home pane. The account Disconnect button must be there. The Disconnect and Reconnect buttons of each network must still work. The new text must be translated. The old sidebar button must be gone. The keyboard focus order must be correct.
   10. Open the channel directory (/list), open Settings and go back, and open the radio popup. The layout must stay stable.
   11. Test Windows with 200% scaling, Linux and macOS, the dark and the light theme, and a theme with a different monospace font.

   Done when

   • All [X] buttons stay in one column in every test above.
   • The sidebar, its handle and its controls stay inside the sidebar, at every window width down to the window minimum.
   • The Disconnect button is only in the Home pane, and all other callers of disconnect-requested still work.
   • The unit tests for the pure functions pass, and the CI is green on all systems.
   • The pull request lists the result of each hand test.
4. Sythos

   added

   Enya: triageDetected and under first analysisDetected and under first analysis

   P2Medium severityMedium severity

   Enya: queuedApproved and waiting for the workerApproved and waiting for the worker

   Enya: CookingBeing worked on by Enya: don't pick it up in parallelBeing worked on by Enya: don't pick it up in parallel

   Enya: on-holdBlocked, waiting for a decisionBlocked, waiting for a decision

   and removed

   Enya: triageDetected and under first analysisDetected and under first analysis

   Enya: queuedApproved and waiting for the workerApproved and waiting for the worker

   Enya: CookingBeing worked on by Enya: don't pick it up in parallelBeing worked on by Enya: don't pick it up in parallel

   Enya: on-holdBlocked, waiting for a decisionBlocked, waiting for a decision

   on Oct 16, 2026
5. Sythos

   closed this as completedin #334on Oct 16, 2026
6. Sythos

   added

   Enya: verifyingPR merged, verifying the checks on the main branchPR merged, verifying the checks on the main branch

   Enya: doneCycle concluded with a verified outcomeCycle concluded with a verified outcome

   and removed

   Enya: CookingBeing worked on by Enya: don't pick it up in parallelBeing worked on by Enya: don't pick it up in parallel

   Enya: verifyingPR merged, verifying the checks on the main branchPR merged, verifying the checks on the main branch

   on Oct 16, 2026