Improve modal fit and Gemini search refinement

frontend/style.css

@@ -50,20 +50,37 @@ body {
   border-radius: 9999px;
 }
 
+.result-panel-scroll::-webkit-scrollbar {
+  width: 10px;
+}
+
+.result-panel-scroll::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.16);
+  border-radius: 9999px;
+}
+
 .result-modal-shell {
-  max-height: calc(100vh - 1.5rem);
+  height: min(calc(100dvh - 1rem), 920px);
+  margin: auto;
+}
+
+.result-modal-shell > * {
+  min-height: 0;
 }
 
 .result-modal-media-frame {
-  max-height: min(48vh, 32rem);
+  max-height: min(42dvh, 28rem);
 }
 
 .result-modal-details {
   flex: 1 1 auto;
   overflow: hidden;
+  min-height: 0;
+  align-items: stretch;
 }
 
-#resultModalSnippet {
+#resultModalSnippet,
+#resultModalReason {
   white-space: pre-wrap;
   word-break: break-word;
 }
@@ -93,16 +110,16 @@ body {
 
 @media (max-height: 900px) {
   .result-modal-media-frame {
-    max-height: min(40vh, 26rem);
+    max-height: min(34dvh, 22rem);
   }
 }
 
 @media (max-height: 720px) {
   .result-modal-shell {
-    max-height: calc(100vh - 1rem);
+    height: min(calc(100dvh - 0.5rem), 780px);
   }
 
   .result-modal-media-frame {
-    max-height: min(34vh, 18rem);
+    max-height: min(28dvh, 15rem);
   }
 }