schmeeve/snotes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mobile CSS

Browse Source
This commit is contained in:
schmeeve
2026-09-24 09:50:05 -07:00
parent f82628f168
commit 3bc266ce2b
2 changed files with 60 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
static/app.css
View File

@@ -230,6 +230,27 @@ body {
.topbar-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.user-select { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--input-bg); color: var(--text); }
.menu-toggle {
display: none;
flex-direction: column;
justify-content: center;
gap: 4px;
width: 44px;
height: 44px;
padding: 10px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface);
cursor: pointer;
}
.menu-toggle span {
display: block;
height: 2px;
width: 100%;
background: var(--text);
border-radius: 2px;
}
.btn {
padding: 8px 14px;
border: 1px solid var(--border);
@@ -497,15 +518,39 @@ body {
}
.hidden { display: none !important; }
/* Prevent wide content (tables, code, long words) from blowing out the layout */
.col-main, .col-side, .editor, .preview { min-width: 0; }
.note-snippet, .preview, .editor { overflow-wrap: break-word; }
pre { white-space: pre-wrap; word-break: break-word; }
.preview table, .note-snippet table { display: block; max-width: 100%; overflow-x: auto; }
.note-snippet img, .preview img, .editor img { max-width: 100%; height: auto; }
@media (max-width: 720px) {
.layout { grid-template-columns: 1fr; gap: 12px; margin: 12px auto; padding: 0 12px; }
.topbar { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
.brand-logo { height: 44px; }
.brand { font-size: 16px; }
.menu-toggle { display: flex; margin-left: auto; }
.search { max-width: none; order: 3; flex-basis: 100%; font-size: 16px; }
.topbar-right { margin-left: auto; gap: 6px; flex-wrap: wrap; }
.topbar-right .btn { padding: 8px 12px; }
.topbar-right {
order: 4;
flex-basis: 100%;
margin-left: 0;
display: none;
flex-direction: column;
align-items: stretch;
gap: 8px;
padding: 10px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.topbar-right.open { display: flex; }
.topbar-right .btn { padding: 10px 12px; width: 100%; text-align: left; }
.topbar-right .user-select { width: 100%; padding: 10px; font-size: 15px; }
.topbar-right .theme-selector { width: 100%; }
.topbar-right .theme-btn { width: 100%; justify-content: space-between; padding: 10px 12px; }
.editor-wrap, .help-card, .tools-row { padding: 0 12px; }
.editor-wrap { margin: 12px auto; }
@@ -544,4 +589,5 @@ body {
.help-table { font-size: 13px; }
.help-table th, .help-table td { padding: 6px 8px; }
.help-table code { white-space: normal; word-break: break-word; }
}