Merge pull request #124 from bocan:fix/menu

Improve responsive design and spacing in the editor

Author: bocan

client/src/components/Editor.css

@@ -71,16 +71,20 @@
 .editor-header {
   display: flex;
   justify-content: space-between;
-  align-items: center;
+  align-items: flex-start;
   padding: var(--space-3) var(--space-4);
   border-bottom: 1px solid var(--border-color);
   background: var(--bg-secondary);
+  gap: var(--space-3);
+  flex-wrap: wrap;
+  min-height: fit-content;
 }
 
 .editor-title-row {
   display: flex;
   align-items: center;
   gap: var(--space-2);
+  flex-shrink: 0;
 }
 
 .editor-header h3 {
@@ -118,8 +122,13 @@
 
 .editor-actions {
   display: flex;
-  gap: var(--space-2);
+  flex-wrap: wrap;
+  gap: var(--space-1) var(--space-2);
   align-items: center;
+  justify-content: flex-end;
+  min-width: 0;
+  flex: 1;
+  max-width: 100%;
 }
 
 .save-status {
@@ -305,18 +314,28 @@
    RESPONSIVE: EDITOR HEADER & TOOLBAR
    ===================================================== */
 
+/* Large screens: compact button spacing */
+@media (max-width: 1200px) {
+  .editor-actions {
+    gap: var(--space-1);
+  }
+
+  .editor-actions button {
+    padding: var(--space-1) var(--space-2);
+  }
+}
+
 /* Tablet and below: allow the header row to wrap so
    action buttons spill to a second row instead of
    being pushed off-screen */
 @media (max-width: 900px) {
   .editor-header {
-    flex-wrap: wrap;
     padding: var(--space-2) var(--space-3);
   }
 
-  .editor-actions {
-    flex-wrap: wrap;
-    gap: var(--space-1);
+  .editor-actions button {
+    padding: var(--space-1) var(--space-2);
+    font-size: var(--text-xs);
   }
 }
 
@@ -325,18 +344,30 @@
 @media (max-width: 768px) {
   .editor-actions {
     flex: 0 0 100%;
+    justify-content: flex-start;
+  }
+
+  .save-status {
+    order: 10;
+    flex-basis: 100%;
+    text-align: left;
+    margin-top: var(--space-1);
   }
 }
 
-/* Mobile (≤480px): tighter button padding so more
-   buttons fit per row; hide verbose save status */
-@media (max-width: 480px) {
+/* Mobile (≤600px): icon-only buttons */
+@media (max-width: 600px) {
   .editor-actions button {
-    padding: var(--space-1) var(--space-2);
-    font-size: var(--text-xs);
+    padding: var(--space-2);
   }
 
-  .save-status {
+  /* Hide button text labels, keep icons */
+  .editor-actions .btn-label {
+    display: none;
+  }
+
+  .save-status,
+  .save-error span {
     display: none;
   }
 }

client/src/components/Editor.tsx

@@ -522,35 +522,39 @@ export const Editor: React.FC<EditorProps> = ({ pagePath, onClose }) => {
             }
             aria-pressed={isListening}
           >
-            <Mic size={14} aria-hidden="true" />{" "}
-            {isListening ? "Stop" : "Dictate"}
+            <Mic size={14} aria-hidden="true" />
+            <span className="btn-label">{isListening ? "Stop" : "Dictate"}</span>
           </button>
           <button
             onClick={() => setShowAttachments(true)}
             className="attachments-btn"
             title="Manage attachments"
             aria-label="Manage attachments"
           >
-            <Paperclip size={14} aria-hidden="true" /> Attachments
+            <Paperclip size={14} aria-hidden="true" />
+            <span className="btn-label">Attachments</span>
           </button>
           <button
             onClick={() => setShowHistory(true)}
             className="history-btn"
             title="View version history"
             aria-label="View version history"
           >
-            <History size={14} aria-hidden="true" /> History
+            <History size={14} aria-hidden="true" />
+            <span className="btn-label">History</span>
           </button>
           <button
             onClick={handleSave}
             disabled={isSaving}
             title="Save page"
             aria-label="Save page"
           >
-            <Save size={14} aria-hidden="true" /> {isSaving ? "Saving..." : "Save"}
+            <Save size={14} aria-hidden="true" />
+            <span className="btn-label">{isSaving ? "Saving..." : "Save"}</span>
           </button>
           <button onClick={onClose} title="Close editor" aria-label="Close editor">
-            <X size={14} aria-hidden="true" /> Close
+            <X size={14} aria-hidden="true" />
+            <span className="btn-label">Close</span>
           </button>
         </div>
       </div>

client/src/components/Preview.css

@@ -386,6 +386,21 @@
   font-style: italic;
 }
 
+/* Span-based image figure (avoids <figure> in <p> hydration errors) */
+.preview-content .image-figure {
+  display: block;
+  margin: var(--space-4) 0;
+  text-align: center;
+}
+
+.preview-content .image-caption {
+  display: block;
+  margin-top: var(--space-2);
+  font-size: var(--text-sm);
+  color: var(--text-muted);
+  font-style: italic;
+}
+
 .preview-content hr {
   border: none;
   height: 1px;

client/src/components/Preview.tsx

@@ -524,22 +524,13 @@ const MarkdownRenderer = React.memo(function MarkdownRenderer({
           const filename = src.replace(".attachments/", "");
           const fullUrl = api.getAttachmentUrl(folderPath, filename);
 
-          // Wrap in figure with caption if alt text exists
+          // Wrap in span-based figure if alt text exists (avoids <figure> in <p> hydration error)
           if (alt) {
             return (
-              <figure style={{ margin: "16px 0", textAlign: "center" }}>
+              <span className="image-figure" role="figure" aria-label={alt}>
                 <img {...props} src={fullUrl} alt={alt} />
-                <figcaption
-                  style={{
-                    marginTop: "8px",
-                    fontSize: "0.9em",
-                    color: "var(--text-secondary)",
-                    fontStyle: "italic",
-                  }}
-                >
-                  {alt}
-                </figcaption>
-              </figure>
+                <span className="image-caption">{alt}</span>
+              </span>
             );
           }
           return <img {...props} src={fullUrl} alt={filename} />;
@@ -548,19 +539,10 @@ const MarkdownRenderer = React.memo(function MarkdownRenderer({
         // For non-attachment images, still show caption if alt text exists
         if (alt) {
           return (
-            <figure style={{ margin: "16px 0", textAlign: "center" }}>
+            <span className="image-figure" role="figure" aria-label={alt}>
               <img {...props} />
-              <figcaption
-                style={{
-                  marginTop: "8px",
-                  fontSize: "0.9em",
-                  color: "var(--text-secondary)",
-                  fontStyle: "italic",
-                }}
-              >
-                {alt}
-              </figcaption>
-            </figure>
+              <span className="image-caption">{alt}</span>
+            </span>
           );
         }