BitSquare/Codeman
2
0
Fork 0
mirror of https://github.com/Ark0N/Codeman.git synced 2026-10-08 00:19:42 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix(mobile): restore response-viewer eye button on phones

Browse Source 
The header-right tray (02fa3f3) was reworked into a position:fixed
collapsible panel with a hamburger toggle, but the toggle button, its
JS, and CSS were later reverted on master while the container kept a
static `mobile-collapsed` class. With no expand mechanism left, the
header-right stayed display:none on mobile, so the response-viewer eye
icon was unreachable even with "Response Viewer" enabled — desktop was
fine because the media-query rule doesn't apply there.

Restore the simple inline always-visible header-right layout (dev's
known-good state). The showResponseViewer setting still controls the
eye's --hidden marker class.

Verified on iPhone viewport: eye visible (26x26) with setting on, hidden
with setting off, tap opens the viewer; desktop eye unaffected.
This commit is contained in:
Teigen
2026-06-13 18:49:11 +08:00
parent 3f2c23cb0f
commit 7102fdb23a
2 changed files with 6 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/web/public/mobile.css
+5 -46
View File
@@ -101,31 +101,12 @@ html.mobile-init .file-browser-panel {
gap: 0.25rem;
}
/* Inline, always-visible header utilities (eye / multimonitor). The
position:fixed collapsible tray (02fa3f3) had its expand toggle reverted on
master but left this container permanently `mobile-collapsed` → the response
viewer eye became unreachable on phones. Restored to the simple inline flow. */
.header-right {
position: fixed;
top: calc(52px + var(--safe-area-top));
left: calc(0.5rem + var(--safe-area-left));
right: auto;
display: flex;
align-items: center;
gap: 0.35rem;
max-width: calc(100vw - 1rem - var(--safe-area-left) - var(--safe-area-right));
padding: 0.35rem;
background: rgba(10, 10, 10, 0.96);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 8px;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
overflow-x: auto;
scrollbar-width: none;
z-index: 2000;
}
.header-right::-webkit-scrollbar {
display: none;
}
.header-right.mobile-collapsed {
display: none;
}
.btn-icon-header:not(.btn-sm) {
@@ -435,32 +416,10 @@ html.mobile-init .file-browser-panel {
}
.header-right {
position: fixed;
top: calc(40px + var(--safe-area-top));
left: calc(0.3rem + var(--safe-area-left));
right: auto;
display: flex;
align-items: center;
padding-left: 0.2rem;
gap: 0.1rem;
max-width: calc(100vw - 0.6rem - var(--safe-area-left) - var(--safe-area-right));
padding: 0.25rem;
background: rgba(10, 10, 10, 0.96);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 8px;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
overflow-x: auto;
scrollbar-width: none;
flex-shrink: 0;
border-left: none;
z-index: 2000;
}
.header-right::-webkit-scrollbar {
display: none;
}
.header-right.mobile-collapsed {
display: none;
}
/* Smaller header buttons on mobile */