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; }
}
.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);
flex: 1;
display: flex;
flex-direction: column;
height: 100vh;
min-width: 0;
}
.content {
flex: 1;
min-height: 0;
overflow-y: auto;
padding: 24px 32px;
}
@ -1504,8 +1517,8 @@ body {
}
.sidebar-backdrop.open { display: block; }
.nav-link { min-height: 44px; padding: 10px 14px; }
.content { margin-left: 0; padding: 16px; padding-top: 68px; }
#banners { margin-left: 0; }
.main-wrapper { margin-left: 0; }
.content { padding: 16px; padding-top: 68px; }
.page-header { flex-direction: column; gap: 12px; align-items: flex-start; }
.device-grid { grid-template-columns: 1fr; }
.content-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

4
frontend/index.html
View file

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