coffey-labs/ihasmail
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Let the contact list be resized, and give the contact the rest of the page

Browse Source 
The contacts grid still had three columns from when the address books sat
inside the view: 220px for them, 280-360px for the list, the rest for the
contact. The books moved to the app's left pane in 350f4f4 and the grid
never followed, so the list was squeezed into the books' 220px, truncating
names, the contact was held to 360px, and the remaining width sat empty.

It is two columns now, with the same splitter as the message list between
them: drag between 240px and the width that leaves 360px for the contact,
arrow keys move it, double-click puts it back to 320px. The width is a
device setting beside the mail list's, so it is kept by a device marked as
your own and never synced. The splitter is hidden where contacts show one
pane at a time. The unused .contacts-books rules are gone.

"Resize contact list" is in all nine catalogues.
This commit is contained in:
jcoffey-dev
2026-09-15 07:24:56 -07:00
parent 14e22c21fe
commit 95395200a3
13 changed files with 43 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/styles/app.css
+2 -4
View File
@@ -1753,8 +1753,7 @@ select optgroup { background-color: var(--bg-elev); color: var(--fg); }
/* ==========================================================================
Contacts
========================================================================== */
.contacts-layout { display: grid; grid-template-columns: 220px minmax(280px, 360px) 1fr; height: 100%; min-height: 0; flex: 1; }
.contacts-books { border-right: 1px solid var(--border); padding: 12px 8px; overflow-y: auto; overflow-x: hidden; }
.contacts-layout { display: grid; grid-template-columns: var(--list-size, 320px) auto minmax(0, 1fr); height: 100%; min-height: 0; flex: 1; }
.contacts-list { border-right: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; }
.contacts-list .list-search { padding: 10px 12px; border-bottom: 1px solid var(--border); }
.contacts-scroll { flex: 1; overflow-y: auto; }
@@ -2015,7 +2014,6 @@ select optgroup { background-color: var(--bg-elev); color: var(--fg); }
@media (max-width: 1100px) {
:root { --list-w: 44%; }
.msg-row .msg-from { width: 140px; }
.contacts-layout { grid-template-columns: 200px 300px 1fr; }
}
@media (max-width: 900px) {
.mail-layout:not(.pane-off):not(.pane-bottom) { grid-template-columns: 1fr !important; }
@@ -2036,7 +2034,7 @@ select optgroup { background-color: var(--bg-elev); color: var(--fg); }
.admin-table .hide-mobile { display: none; }
.admin-sheet { width: 100%; border-left: 0; box-shadow: none; }
.contacts-layout { grid-template-columns: 1fr; }
.contacts-books { display: none; }
.contacts-layout .splitter { display: none; }
.contacts-layout.detail .contacts-list { display: none; }
.contacts-layout:not(.detail) .contact-detail { display: none; }
.cal-layout { grid-template-columns: 1fr; }