bytelyst/learning_ai_notes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(web): stabilize mobile layouts

Browse Source
This commit is contained in:
Saravana Achu Mac 2026-05-05 10:58:10 -07:00
parent 7acbf2dae7
commit 837a187bd1
3 changed files with 19 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/app/(app)/notes/[noteId]/page.tsx
View File

@ -228,7 +228,7 @@ export default function NoteDetailPage() {
title={note.title}
description="Editable note surface with metadata, linked context, tasks, artifacts, and review history."
actions={
<div style={{ display: "flex", gap: "var(--nl-space-2)", alignItems: "center" }}>
<div style={{ display: "flex", gap: "var(--nl-space-2)", alignItems: "center", flexWrap: "wrap" }}>
{isSaving ? (
<Badge>Saving</Badge>
) : (
@ -259,7 +259,7 @@ export default function NoteDetailPage() {
</div>
}
>
<div style={{ display: "grid", gridTemplateColumns: "minmax(0, 1.7fr) minmax(320px, 1fr)", gap: "var(--nl-space-4)" }}>
<div className="note-detail-grid" style={{ display: "grid", gridTemplateColumns: "minmax(0, 1.7fr) minmax(320px, 1fr)", gap: "var(--nl-space-4)" }}>
<NoteEditor
note={note}
onSave={handleSave}

2
web/src/app/(app)/workspaces/page.tsx
View File

@ -172,7 +172,7 @@ function WorkspacesPageInner() {
</div>
}
>
<section style={{ display: "grid", gridTemplateColumns: "minmax(260px, 320px) minmax(0, 1fr)", gap: "var(--nl-space-4)" }}>
<section className="workspace-layout-grid" style={{ display: "grid", gridTemplateColumns: "minmax(260px, 320px) minmax(0, 1fr)", gap: "var(--nl-space-4)" }}>
<aside className="surface-card" style={{ padding: "var(--nl-space-5)", display: "grid", gap: "var(--nl-space-4)" }}>
<div style={{ fontWeight: 700 }}>Saved views</div>
<div style={{ display: "grid", gap: "var(--nl-space-3)" }}>

16
web/src/app/globals.css
View File

@ -124,6 +124,22 @@ button {
border-right: 0;
border-bottom: 1px solid var(--nl-border-default);
}
.main-panel {
padding: var(--nl-space-5);
}
.note-detail-grid,
.workspace-layout-grid {
grid-template-columns: minmax(0, 1fr) !important;
}
}
@media (max-width: 520px) {
.main-panel {
padding: var(--nl-space-4);
padding-top: var(--nl-space-8);
}
}
/* Focus-visible — keyboard accessibility */