Fix UI scrolling issue in de-identified output panel

app/static/style.css

@@ -26,7 +26,7 @@ body {
     justify-content: center;
     align-items: center;
     overflow: hidden;
-    background-image: 
+    background-image:
         radial-gradient(circle at 20% 20%, rgba(0, 210, 255, 0.05) 0%, transparent 40%),
         radial-gradient(circle at 80% 80%, rgba(58, 123, 213, 0.05) 0%, transparent 40%);
 }
@@ -64,6 +64,7 @@ header {
     font-weight: 600;
     background: linear-gradient(to right, var(--accent-primary), var(--accent-secondary));
     -webkit-background-clip: text;
+    background-clip: text;
     -webkit-text-fill-color: transparent;
 }
 
@@ -77,9 +78,20 @@ header {
 }
 
 @keyframes pulse {
-    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 210, 255, 0.7); }
-    70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(0, 210, 255, 0); }
-    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 210, 255, 0); }
+    0% {
+        transform: scale(0.95);
+        box-shadow: 0 0 0 0 rgba(0, 210, 255, 0.7);
+    }
+
+    70% {
+        transform: scale(1);
+        box-shadow: 0 0 0 10px rgba(0, 210, 255, 0);
+    }
+
+    100% {
+        transform: scale(0.95);
+        box-shadow: 0 0 0 0 rgba(0, 210, 255, 0);
+    }
 }
 
 .status-bar {
@@ -101,7 +113,9 @@ header {
     border-radius: 50%;
 }
 
-.status-dot.healthy { background: var(--success); }
+.status-dot.healthy {
+    background: var(--success);
+}
 
 main {
     flex: 1;
@@ -111,12 +125,14 @@ main {
     gap: 2rem;
 }
 
-.input-panel, .output-panel {
+.input-panel,
+.output-panel {
     flex: 1;
     display: flex;
     flex-direction: column;
     gap: 1.5rem;
     min-width: 0;
+    min-height: 0;
 }
 
 .panel-header h2 {
@@ -208,7 +224,16 @@ textarea:focus {
     font-size: 0.9rem;
 }
 
-.text-btn:hover { color: var(--text-main); }
+.text-btn:hover {
+    color: var(--text-main);
+}
+
+.diff-view {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+}
 
 .result-box {
     flex: 1;
@@ -220,6 +245,7 @@ textarea:focus {
     font-size: 0.9rem;
     overflow-y: auto;
     white-space: pre-wrap;
+    min-height: 0;
 }
 
 .entity-highlight {
@@ -282,7 +308,9 @@ footer a {
     transition: color 0.2s ease;
 }
 
-footer a:hover { color: var(--text-main); }
+footer a:hover {
+    color: var(--text-main);
+}
 
 /* Loader */
 .loader {
@@ -295,7 +323,11 @@ footer a:hover { color: var(--text-main); }
 }
 
 @keyframes spin {
-    to { transform: rotate(360deg); }
+    to {
+        transform: rotate(360deg);
+    }
 }
 
-[hidden] { display: none !important; }
+[hidden] {
+    display: none !important;
+}