ScuttleBot
ui: fix mobile chat layout — panels hidden by default, overlay on tap On mobile (<600px), chat sidebar and nicklist start hidden (width:0) instead of showing at desktop widths. Toggle buttons open them as fixed overlays. Opening one panel closes the other. Desktop behavior unchanged.
Commit
5d08ef1277a7aa95039b5f588608783868e8fab0deaef05ce7512c90f420cff3
Parent
c0251636b0ee88b…
1 file changed
+29
-11
+29
-11
| --- internal/api/ui/index.html | ||
| +++ internal/api/ui/index.html | ||
| @@ -225,15 +225,15 @@ | ||
| 225 | 225 | .form-row { grid-template-columns:1fr !important; } |
| 226 | 226 | |
| 227 | 227 | /* inline 2-column grids inside drawers/forms */ |
| 228 | 228 | [style*="grid-template-columns:1fr 1fr"] { grid-template-columns:1fr !important; } |
| 229 | 229 | |
| 230 | - /* chat: collapse sidebar and nicklist by default, overlay when open */ | |
| 231 | - .chat-sidebar { width:0; min-width:0; border-right:none; } | |
| 232 | - .chat-sidebar:not(.collapsed) { position:fixed; top:44px; left:0; bottom:0; width:200px; z-index:50; border-right:1px solid #30363d; } | |
| 233 | - .chat-nicklist { width:0; min-width:0; border-left:none; } | |
| 234 | - .chat-nicklist:not(.collapsed) { position:fixed; top:44px; right:0; bottom:0; width:160px; z-index:50; border-left:1px solid #30363d; } | |
| 230 | + /* chat: hide both panels by default, show as overlay when toggled open */ | |
| 231 | + .chat-sidebar { width:0 !important; min-width:0 !important; border-right:none !important; overflow:hidden !important; } | |
| 232 | + .chat-sidebar.mobile-open { position:fixed; top:44px; left:0; bottom:0; width:220px !important; z-index:50; border-right:1px solid #30363d !important; overflow:visible !important; } | |
| 233 | + .chat-nicklist { width:0 !important; min-width:0 !important; border-left:none !important; overflow:hidden !important; } | |
| 234 | + .chat-nicklist.mobile-open { position:fixed; top:44px; right:0; bottom:0; width:160px !important; z-index:50; border-left:1px solid #30363d !important; overflow-y:auto !important; } | |
| 235 | 235 | .sidebar-resize { display:none; } |
| 236 | 236 | |
| 237 | 237 | /* settings: stack label above input */ |
| 238 | 238 | .setting-row { flex-direction:column !important; align-items:flex-start !important; gap:6px !important; } |
| 239 | 239 | .setting-label { min-width:unset !important; } |
| @@ -1869,23 +1869,41 @@ | ||
| 1869 | 1869 | _tabPrefix = ''; |
| 1870 | 1870 | }); |
| 1871 | 1871 | })(); |
| 1872 | 1872 | |
| 1873 | 1873 | // --- sidebar collapse toggles --- |
| 1874 | +function isMobile() { return window.matchMedia('(max-width: 600px)').matches; } | |
| 1875 | + | |
| 1874 | 1876 | function toggleSidebar(side) { |
| 1875 | 1877 | if (side === 'left') { |
| 1876 | 1878 | const el = document.getElementById('chat-sidebar-left'); |
| 1877 | 1879 | const btn = document.getElementById('sidebar-left-toggle'); |
| 1878 | - const collapsed = el.classList.toggle('collapsed'); | |
| 1879 | - btn.textContent = collapsed ? '›' : '‹'; | |
| 1880 | - btn.title = collapsed ? 'expand' : 'collapse'; | |
| 1880 | + if (isMobile()) { | |
| 1881 | + const open = el.classList.toggle('mobile-open'); | |
| 1882 | + btn.textContent = open ? '‹' : '›'; | |
| 1883 | + btn.title = open ? 'close' : 'channels'; | |
| 1884 | + // close other panel | |
| 1885 | + document.getElementById('chat-nicklist').classList.remove('mobile-open'); | |
| 1886 | + } else { | |
| 1887 | + const collapsed = el.classList.toggle('collapsed'); | |
| 1888 | + btn.textContent = collapsed ? '›' : '‹'; | |
| 1889 | + btn.title = collapsed ? 'expand' : 'collapse'; | |
| 1890 | + } | |
| 1881 | 1891 | } else { |
| 1882 | 1892 | const el = document.getElementById('chat-nicklist'); |
| 1883 | 1893 | const btn = document.getElementById('sidebar-right-toggle'); |
| 1884 | - const collapsed = el.classList.toggle('collapsed'); | |
| 1885 | - btn.textContent = collapsed ? '‹' : '›'; | |
| 1886 | - btn.title = collapsed ? 'expand' : 'collapse'; | |
| 1894 | + if (isMobile()) { | |
| 1895 | + const open = el.classList.toggle('mobile-open'); | |
| 1896 | + btn.textContent = open ? '›' : '‹'; | |
| 1897 | + btn.title = open ? 'close' : 'users'; | |
| 1898 | + // close other panel | |
| 1899 | + document.getElementById('chat-sidebar-left').classList.remove('mobile-open'); | |
| 1900 | + } else { | |
| 1901 | + const collapsed = el.classList.toggle('collapsed'); | |
| 1902 | + btn.textContent = collapsed ? '‹' : '›'; | |
| 1903 | + btn.title = collapsed ? 'expand' : 'collapse'; | |
| 1904 | + } | |
| 1887 | 1905 | } |
| 1888 | 1906 | } |
| 1889 | 1907 | |
| 1890 | 1908 | // --- sidebar drag-to-resize --- |
| 1891 | 1909 | (function() { |
| 1892 | 1910 |
| --- internal/api/ui/index.html | |
| +++ internal/api/ui/index.html | |
| @@ -225,15 +225,15 @@ | |
| 225 | .form-row { grid-template-columns:1fr !important; } |
| 226 | |
| 227 | /* inline 2-column grids inside drawers/forms */ |
| 228 | [style*="grid-template-columns:1fr 1fr"] { grid-template-columns:1fr !important; } |
| 229 | |
| 230 | /* chat: collapse sidebar and nicklist by default, overlay when open */ |
| 231 | .chat-sidebar { width:0; min-width:0; border-right:none; } |
| 232 | .chat-sidebar:not(.collapsed) { position:fixed; top:44px; left:0; bottom:0; width:200px; z-index:50; border-right:1px solid #30363d; } |
| 233 | .chat-nicklist { width:0; min-width:0; border-left:none; } |
| 234 | .chat-nicklist:not(.collapsed) { position:fixed; top:44px; right:0; bottom:0; width:160px; z-index:50; border-left:1px solid #30363d; } |
| 235 | .sidebar-resize { display:none; } |
| 236 | |
| 237 | /* settings: stack label above input */ |
| 238 | .setting-row { flex-direction:column !important; align-items:flex-start !important; gap:6px !important; } |
| 239 | .setting-label { min-width:unset !important; } |
| @@ -1869,23 +1869,41 @@ | |
| 1869 | _tabPrefix = ''; |
| 1870 | }); |
| 1871 | })(); |
| 1872 | |
| 1873 | // --- sidebar collapse toggles --- |
| 1874 | function toggleSidebar(side) { |
| 1875 | if (side === 'left') { |
| 1876 | const el = document.getElementById('chat-sidebar-left'); |
| 1877 | const btn = document.getElementById('sidebar-left-toggle'); |
| 1878 | const collapsed = el.classList.toggle('collapsed'); |
| 1879 | btn.textContent = collapsed ? '›' : '‹'; |
| 1880 | btn.title = collapsed ? 'expand' : 'collapse'; |
| 1881 | } else { |
| 1882 | const el = document.getElementById('chat-nicklist'); |
| 1883 | const btn = document.getElementById('sidebar-right-toggle'); |
| 1884 | const collapsed = el.classList.toggle('collapsed'); |
| 1885 | btn.textContent = collapsed ? '‹' : '›'; |
| 1886 | btn.title = collapsed ? 'expand' : 'collapse'; |
| 1887 | } |
| 1888 | } |
| 1889 | |
| 1890 | // --- sidebar drag-to-resize --- |
| 1891 | (function() { |
| 1892 |
| --- internal/api/ui/index.html | |
| +++ internal/api/ui/index.html | |
| @@ -225,15 +225,15 @@ | |
| 225 | .form-row { grid-template-columns:1fr !important; } |
| 226 | |
| 227 | /* inline 2-column grids inside drawers/forms */ |
| 228 | [style*="grid-template-columns:1fr 1fr"] { grid-template-columns:1fr !important; } |
| 229 | |
| 230 | /* chat: hide both panels by default, show as overlay when toggled open */ |
| 231 | .chat-sidebar { width:0 !important; min-width:0 !important; border-right:none !important; overflow:hidden !important; } |
| 232 | .chat-sidebar.mobile-open { position:fixed; top:44px; left:0; bottom:0; width:220px !important; z-index:50; border-right:1px solid #30363d !important; overflow:visible !important; } |
| 233 | .chat-nicklist { width:0 !important; min-width:0 !important; border-left:none !important; overflow:hidden !important; } |
| 234 | .chat-nicklist.mobile-open { position:fixed; top:44px; right:0; bottom:0; width:160px !important; z-index:50; border-left:1px solid #30363d !important; overflow-y:auto !important; } |
| 235 | .sidebar-resize { display:none; } |
| 236 | |
| 237 | /* settings: stack label above input */ |
| 238 | .setting-row { flex-direction:column !important; align-items:flex-start !important; gap:6px !important; } |
| 239 | .setting-label { min-width:unset !important; } |
| @@ -1869,23 +1869,41 @@ | |
| 1869 | _tabPrefix = ''; |
| 1870 | }); |
| 1871 | })(); |
| 1872 | |
| 1873 | // --- sidebar collapse toggles --- |
| 1874 | function isMobile() { return window.matchMedia('(max-width: 600px)').matches; } |
| 1875 | |
| 1876 | function toggleSidebar(side) { |
| 1877 | if (side === 'left') { |
| 1878 | const el = document.getElementById('chat-sidebar-left'); |
| 1879 | const btn = document.getElementById('sidebar-left-toggle'); |
| 1880 | if (isMobile()) { |
| 1881 | const open = el.classList.toggle('mobile-open'); |
| 1882 | btn.textContent = open ? '‹' : '›'; |
| 1883 | btn.title = open ? 'close' : 'channels'; |
| 1884 | // close other panel |
| 1885 | document.getElementById('chat-nicklist').classList.remove('mobile-open'); |
| 1886 | } else { |
| 1887 | const collapsed = el.classList.toggle('collapsed'); |
| 1888 | btn.textContent = collapsed ? '›' : '‹'; |
| 1889 | btn.title = collapsed ? 'expand' : 'collapse'; |
| 1890 | } |
| 1891 | } else { |
| 1892 | const el = document.getElementById('chat-nicklist'); |
| 1893 | const btn = document.getElementById('sidebar-right-toggle'); |
| 1894 | if (isMobile()) { |
| 1895 | const open = el.classList.toggle('mobile-open'); |
| 1896 | btn.textContent = open ? '›' : '‹'; |
| 1897 | btn.title = open ? 'close' : 'users'; |
| 1898 | // close other panel |
| 1899 | document.getElementById('chat-sidebar-left').classList.remove('mobile-open'); |
| 1900 | } else { |
| 1901 | const collapsed = el.classList.toggle('collapsed'); |
| 1902 | btn.textContent = collapsed ? '‹' : '›'; |
| 1903 | btn.title = collapsed ? 'expand' : 'collapse'; |
| 1904 | } |
| 1905 | } |
| 1906 | } |
| 1907 | |
| 1908 | // --- sidebar drag-to-resize --- |
| 1909 | (function() { |
| 1910 |