Server rail: the + is pinned below the list, under a rule and above the cog; the list scrolls above it

Co-Authored-By: Claude Sonnet 5.5 <[email protected]>

scripts/ui-shots.mjs

@@ -1105,6 +1105,23 @@ const SCENES = [
     },
     clip: { x: 277, y: 600, width: 823, height: 200 }
   },
+  {
+    // Many servers (#329-ish): the list scrolls, the + and the cog stay put.
+    name: 'rail-many-servers',
+    setup: async (p) => {
+      await discord(false)(p)
+      await p.evaluate(`(() => {
+        const s = window.__mohoShots.state()
+        const extra = Array.from({ length: 24 }, (_, i) => ({ id: 'discord:shots|guild:x' + i, accountId: 'discord:shots', service: 'discord', kind: 'guild', name: 'Server ' + (i + 1), position: 10 + i }))
+        window.__mohoShots.patch({ groups: [...s.groups, ...extra] })
+        return true
+      })()`)
+      await sleep(600)
+      await p.evaluate(`document.querySelector('.rail-scroll').scrollTop = 1e6`)
+      await sleep(300)
+    },
+    clip: { x: 0, y: 44, width: 280, height: 756 }
+  },
   {
     name: 'discord-media-grid',
     setup: async (p) => {

src/renderer/src/app.css

@@ -5241,6 +5241,7 @@ video.lightbox-media {
 
 /* The rail's entries scroll; the cog below stays put. */
 .rail-scroll {
+  overscroll-behavior: contain;
   display: flex;
   flex-direction: column;
   align-items: center;

src/renderer/src/components/ServerRail.tsx

@@ -681,24 +681,6 @@ export function ServerRail(): JSX.Element | null {
 
       {rest.map(renderEntry)}
 
-      {/* Where a server is added or joined, at the foot of the list as in
-          Discord, for whichever account is being looked at. */}
-      <button
-        type="button"
-        className="rail-tile rail-add"
-        aria-label="Add or join a server"
-        onMouseEnter={(e) => showRailTip(e.currentTarget, 'Add or join a server')}
-        onMouseLeave={hideRailTip}
-        onClick={() => {
-          const account =
-            groups.find((g) => g.id === activeGroupId)?.accountId || (store.getSnapshot().accounts[0]?.id ?? '')
-          store.setActivePanel('join', account)
-        }}
-      >
-        <span className="rail-face">
-          <Icon name="add" size={22} />
-        </span>
-      </button>
       </div>
 
       {folderMenu && (
@@ -764,6 +746,26 @@ export function ServerRail(): JSX.Element | null {
       )}
 
       <div className="rail-divider" />
+      {/* Where a server is added or joined: pinned below the list with a rule
+          above it, so it never moves however many servers there are or
+          wherever one is dropped, and the list scrolls above it. For whichever
+          account is being looked at. */}
+      <button
+        type="button"
+        className="rail-tile rail-add"
+        aria-label="Add or join a server"
+        onMouseEnter={(e) => showRailTip(e.currentTarget, 'Add or join a server')}
+        onMouseLeave={hideRailTip}
+        onClick={() => {
+          const account =
+            groups.find((g) => g.id === activeGroupId)?.accountId || (store.getSnapshot().accounts[0]?.id ?? '')
+          store.setActivePanel('join', account)
+        }}
+      >
+        <span className="rail-face">
+          <Icon name="add" size={22} />
+        </span>
+      </button>
       <RailMenu />
     </nav>
   )