From 237914dfcd00f3f8e29d58d39fbccf8e20b6b5a5 Mon Sep 17 00:00:00 2001
From: bruno <bruno.charest@gmail.com>
Date: Fri, 10 Jul 2026 16:09:22 -0400
Subject: [PATCH] =?UTF-8?q?feat:=20responsive=20design=20=E2=80=94=20media?=
 =?UTF-8?q?=20queries=20for=20tablet/mobile?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- CSS media queries: <=1024px (tablet) and <=768px (mobile)
- Sidebar hidden on mobile, togglable via .mobile-open
- Topbar, page editor, workspace, settings adapt padding
- Share dialog shrinks to 90vw on mobile
- Get Started toolbar wraps and centers pills
- No JS changes needed — pure CSS responsive
---
 static/css/app.css | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/static/css/app.css b/static/css/app.css
index b174b2a..1def8e0 100644
--- a/static/css/app.css
+++ b/static/css/app.css
@@ -2476,3 +2476,26 @@ input, select, textarea { font-family: inherit; color: inherit; }
   white-space: nowrap;
 }
 .empty-toolbar-item:hover { background: var(--bg-hover); border-color: var(--text-dim); }
+
+/* ══════════ Responsive — écrans < 1024px ══════════ */
+@media (max-width: 1024px) {
+  .sidebar { width: 240px; }
+  .main-content { margin-left: 240px; }
+  .topbar { padding: 8px 12px; }
+  .page-editor-wrapper { padding: 24px 16px; }
+  .workspace-layout { padding: 24px 16px; }
+  .settings-layout { padding: 24px 16px; }
+}
+@media (max-width: 768px) {
+  .sidebar { display: none; }
+  .sidebar.mobile-open { display: block; position: fixed; z-index: 1000; top: 0; left: 0; bottom: 0; width: 280px; }
+  .main-content { margin-left: 0; }
+  .topbar-left { max-width: 200px; }
+  .topbar-right { gap: 4px; }
+  .page-topbar { flex-wrap: wrap; gap: 8px; }
+  .page-topbar-right { flex-wrap: wrap; }
+  .project-grid { grid-template-columns: 1fr; }
+  .share-dialog { width: 90vw; right: -16px; }
+  .get-started-toolbar { flex-wrap: wrap; justify-content: center; }
+  .gs-pill { font-size: 12px; padding: 6px 12px; }
+}