From fe997b8d4d4def8adfc7e08d1b49cc4962e87249 Mon Sep 17 00:00:00 2001
From: lucaronin <luca.rossi.917@gmail.com>
Date: Tue, 17 Feb 2026 11:31:23 +0100
Subject: [PATCH] =?UTF-8?q?feat:=20redesign=20v2=20=E2=80=94=20inspector?=
 =?UTF-8?q?=20layout=20fix,=20editor=20scroll,=20diff=20moved=20to=20bread?=
 =?UTF-8?q?crumb=20bar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Fix editor scroll (min-height: 0 + overflow)
- Properties panel extends full height
- Moved Diff button to git-branch icon in breadcrumb bar
- Minor CSS fixes for app layout
---
 src/App.css               |  2 ++
 src/components/Editor.css |  3 ++-
 src/components/Editor.tsx | 52 +++++++++++++++++++++------------------
 3 files changed, 32 insertions(+), 25 deletions(-)

diff --git a/src/App.css b/src/App.css
index 724c67b6..b6e63a44 100644
--- a/src/App.css
+++ b/src/App.css
@@ -37,6 +37,8 @@
 .app__editor {
   flex: 1;
   min-width: 0;
+  min-height: 0;
+  overflow: hidden;
   display: flex;
   flex-direction: column;
 }
diff --git a/src/components/Editor.css b/src/components/Editor.css
index 269cda19..dfe764b6 100644
--- a/src/components/Editor.css
+++ b/src/components/Editor.css
@@ -17,7 +17,8 @@
 /* BlockNote container */
 .editor__blocknote-container {
   flex: 1;
-  overflow: auto;
+  min-height: 0;
+  overflow-y: auto;
   display: flex;
   justify-content: center;
 }
diff --git a/src/components/Editor.tsx b/src/components/Editor.tsx
index 371cab62..f08cbe91 100644
--- a/src/components/Editor.tsx
+++ b/src/components/Editor.tsx
@@ -9,7 +9,6 @@ import { Inspector, type FrontmatterValue } from './Inspector'
 import { ResizeHandle } from './ResizeHandle'
 import { useEditorTheme } from '../hooks/useTheme'
 import { cn } from '@/lib/utils'
-import { Button } from '@/components/ui/button'
 import { X } from 'lucide-react'
 import {
   Plus,
@@ -364,16 +363,6 @@ export function Editor({
           WebkitAppRegion: 'no-drag',
         } as React.CSSProperties}
       >
-        {showDiffToggle && (
-          <Button
-            variant={diffMode ? 'default' : 'outline'}
-            size="xs"
-            onClick={handleToggleDiff}
-            disabled={diffLoading}
-          >
-            {diffLoading ? '...' : diffMode ? 'Edit' : 'Diff'}
-          </Button>
-        )}
         <button
           className="flex items-center justify-center border-none bg-transparent p-0 text-muted-foreground cursor-pointer hover:text-foreground transition-colors"
           onClick={onCreateNote}
@@ -434,14 +423,29 @@ export function Editor({
         >
           <MagnifyingGlass size={16} />
         </button>
-        <button
-          className="flex items-center justify-center border-none bg-transparent p-0 text-muted-foreground"
-          style={disabledIconStyle}
-          title="Coming soon"
-          tabIndex={-1}
-        >
-          <GitBranch size={16} />
-        </button>
+        {showDiffToggle && (
+          <button
+            className={cn(
+              "flex items-center justify-center border-none bg-transparent p-0 cursor-pointer transition-colors",
+              diffMode ? "text-foreground" : "text-muted-foreground hover:text-foreground"
+            )}
+            onClick={handleToggleDiff}
+            disabled={diffLoading}
+            title={diffLoading ? 'Loading diff...' : diffMode ? 'Back to editor' : 'Show diff'}
+          >
+            <GitBranch size={16} />
+          </button>
+        )}
+        {!showDiffToggle && (
+          <button
+            className="flex items-center justify-center border-none bg-transparent p-0 text-muted-foreground"
+            style={disabledIconStyle}
+            title="No changes"
+            tabIndex={-1}
+          >
+            <GitBranch size={16} />
+          </button>
+        )}
         <button
           className="flex items-center justify-center border-none bg-transparent p-0 text-muted-foreground"
           style={disabledIconStyle}
@@ -472,8 +476,8 @@ export function Editor({
 
   const inspectorPanel = (
     <div
-      className="shrink-0 flex flex-col"
-      style={{ width: inspectorCollapsed ? 40 : inspectorWidth }}
+      className="shrink-0 flex flex-col min-h-0"
+      style={{ width: inspectorCollapsed ? 40 : inspectorWidth, height: '100%' }}
     >
       <Inspector
         collapsed={inspectorCollapsed}
@@ -493,7 +497,7 @@ export function Editor({
 
   if (tabs.length === 0) {
     return (
-      <div className="editor flex flex-col bg-background text-foreground">
+      <div className="editor flex flex-col min-h-0 overflow-hidden bg-background text-foreground">
         {tabBar}
         <div className="flex flex-1 min-h-0">
           <div className="flex flex-1 flex-col items-center justify-center gap-2 text-center text-muted-foreground">
@@ -508,10 +512,10 @@ export function Editor({
   }
 
   return (
-    <div className="editor flex flex-col bg-background text-foreground">
+    <div className="editor flex flex-col min-h-0 overflow-hidden bg-background text-foreground">
       {tabBar}
       <div className="flex flex-1 min-h-0">
-        <div className="flex flex-1 flex-col min-w-0">
+        <div className="flex flex-1 flex-col min-w-0 min-h-0">
           {breadcrumbBar}
           {diffMode ? (
             <div className="flex-1 overflow-auto">