Archive/screentinker
1
0
Fork 0
mirror of https://github.com/screentinker/screentinker.git synced 2026-08-13 13:53:12 -06:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

Fix banner shifting whole dashboard layout

Browse source 
Co-authored-by: ChrisChrome <28414320+ChrisChrome@users.noreply.github.com>
This commit is contained in:
copilot-swe-agent[bot] 2026-08-10 22:06:45 +00:00 committed by GitHub
parent 1e278ea373
commit eeab23e0d3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 23 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
frontend/css/main.css
View file

@ -291,10 +291,23 @@ body {
50% { opacity: 0.4; } 50% { opacity: 0.4; }
} }
.content { /* Wraps the (optional) banners strip and main content so they stack
vertically as a single flex column, independent from the fixed sidebar.
Without this wrapper, #banners and .content would be direct siblings in
the (row-direction) body flexbox, turning the banner into a narrow flex
item next to the content instead of a full-width strip above it, and
shifting the whole dashboard layout out of alignment with the sidebar. */
.main-wrapper {
margin-left: var(--sidebar-width); margin-left: var(--sidebar-width);
flex: 1; display: flex;
flex-direction: column;
height: 100vh; height: 100vh;
min-width: 0;
}
.content {
flex: 1;
min-height: 0;
overflow-y: auto; overflow-y: auto;
padding: 24px 32px; padding: 24px 32px;
} }
@ -1504,8 +1517,8 @@ body {
} }
.sidebar-backdrop.open { display: block; } .sidebar-backdrop.open { display: block; }
.nav-link { min-height: 44px; padding: 10px 14px; } .nav-link { min-height: 44px; padding: 10px 14px; }
.content { margin-left: 0; padding: 16px; padding-top: 68px; } .main-wrapper { margin-left: 0; }
#banners { margin-left: 0; } .content { padding: 16px; padding-top: 68px; }
.page-header { flex-direction: column; gap: 12px; align-items: flex-start; } .page-header { flex-direction: column; gap: 12px; align-items: flex-start; }
.device-grid { grid-template-columns: 1fr; } .device-grid { grid-template-columns: 1fr; }
.content-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .content-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

10
frontend/index.html
View file

@ -174,11 +174,13 @@
</div> </div>
</nav> </nav>
<div id="banners" style="margin-left:var(--sidebar-width)"></div> <div class="main-wrapper">
<div id="banners"></div>
<main class="content" id="app"> <main class="content" id="app">
<!-- Views rendered here --> <!-- Views rendered here -->
</main> </main>
</div>
<!-- Add Device Modal --> <!-- Add Device Modal -->
<div class="modal-overlay" id="addDeviceModal" style="display:none"> <div class="modal-overlay" id="addDeviceModal" style="display:none">