From 14b7e1e6efd7dcae18b5a6f5413e0b6a4830feb6 Mon Sep 17 00:00:00 2001
From: Jordan Rome <jordalgo@meta.com>
Date: Wed, 3 Dec 2025 16:56:55 -0500
Subject: [PATCH] Fix annoying flicker

I saw this with a few logs where the "hint" section
at the bottom (that contains the selected and
hovered line) grows in height which causes the
main section with the log to resize, which can
change what line you're hovering on and then causes
the "hint" section to shrink, which causes
the main section to resize again - and so forth.

This change removes the "Selected Line" at the bottom
and also updates the style so the, now reduced,
hint section can overflow on top of the main content
for really long lines.
---
 src/App.tsx                         |  9 ---------
 src/__snapshots__/App.test.tsx.snap | 14 +-------------
 src/components.tsx                  | 22 +---------------------
 src/index.css                       | 17 ++++++++++++-----
 4 files changed, 14 insertions(+), 48 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 87a1519..203ff05 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -15,7 +15,6 @@ import {
   LogLineState,
   HoveredLineHint,
   MainContent,
-  SelectedLineHint,
   ToolTip,
   Examples,
   CSourceRow,
@@ -229,9 +228,6 @@ function App({ testListHeight }: { testListHeight?: number }) {
   const fileInputRef = useRef<HTMLInputElement>(null);
 
   const { verifierLogState, logLineIdxToVisualIdx } = visualLogState;
-
-  const { line: selectedLine } = selectedState;
-  const selectedLineVisualIdx = logLineIdxToVisualIdx.get(selectedLine) || 0;
   const hoveredLineVisualIdx =
     logLineIdxToVisualIdx.get(hoveredState.line) || 0;
 
@@ -555,11 +551,6 @@ function App({ testListHeight }: { testListHeight?: number }) {
           addPastedCSourceFile={addPastedCSourceFile}
         />
         <div id="hint">
-          <SelectedLineHint
-            selectedLine={selectedLine}
-            visualIdx={selectedLineVisualIdx}
-            lines={verifierLogState.lines}
-          />
           <HoveredLineHint
             hoveredLine={hoveredState.line}
             visibleIdx={hoveredLineVisualIdx}
diff --git a/src/__snapshots__/App.test.tsx.snap b/src/__snapshots__/App.test.tsx.snap
index 7e36543..d4d5275 100644
--- a/src/__snapshots__/App.test.tsx.snap
+++ b/src/__snapshots__/App.test.tsx.snap
@@ -500,24 +500,12 @@ exports[`App renders the log visualizer when text is pasted 1`] = `
       <div
         id="hint"
       >
-        <div
-          class="hint-line"
-          id="hint-selected-line"
-        >
-          <span>
-            [selected raw line] 
-            1
-            :
-          </span>
-           
-          314: (73) *(u8 *)(r7 +1303) = r1      ; frame1: R1_w=0 R7=map_value(off=0,ks=4,vs=2808,imm=0)
-        </div>
         <div
           class="hint-line"
           id="hint-hovered-line"
         >
           <span>
-            [hovered raw line] 
+            [raw line] 
             1
             :
           </span>
diff --git a/src/components.tsx b/src/components.tsx
index 66b412a..076680b 100644
--- a/src/components.tsx
+++ b/src/components.tsx
@@ -298,7 +298,7 @@ export function HoveredLineHint({
   }
   return (
     <div id="hint-hovered-line" className="hint-line">
-      <span>[hovered raw line] {visibleIdx + 1}:</span>&nbsp;
+      <span>[raw line] {visibleIdx + 1}:</span>&nbsp;
       {lines[hoveredLine].raw}
     </div>
   );
@@ -807,26 +807,6 @@ const StackSlotSpan = ({
   );
 };
 
-export function SelectedLineHint({
-  selectedLine,
-  visualIdx,
-  lines,
-}: {
-  selectedLine: number;
-  visualIdx: number;
-  lines: ParsedLine[];
-}) {
-  if (lines.length === 0) {
-    return <></>;
-  }
-  return (
-    <div id="hint-selected-line" className="hint-line">
-      <span>[selected raw line] {visualIdx + 1}:</span>&nbsp;
-      {lines[selectedLine].raw}
-    </div>
-  );
-}
-
 function CSourcePastePopup({
   verifierLogState,
   fileName,
diff --git a/src/index.css b/src/index.css
index c763d2a..6f967cd 100644
--- a/src/index.css
+++ b/src/index.css
@@ -43,12 +43,14 @@ h1 {
 
 .main-content {
   display: flex;
-  flex: 1;
   min-height: 0; /* Important for flex child to respect parent height */
   font-size: 14px;
   border: 2px solid var(--mid-gray);
   border-radius: 4px;
-  margin: 10px 16px 8px 16px;
+  margin: 10px 16px 0px 16px;
+  height: calc(
+    100% - 136px
+  ); /* This number is the height of the nav bar and the bottom hint container */
 }
 
 #input-text {
@@ -624,14 +626,19 @@ h1 {
 /* Footer */
 
 #hint {
-  padding: 0px 16px 16px 16px;
+  padding: 10px 16px;
   color: var(--primary-dark);
-  min-height: 40px;
+  min-height: 20px;
+  width: 100%;
   font-family: "Roboto", sans-serif;
+  position: absolute;
+  background-color: var(--mid-gray-20);
+  border-top: 2px solid var(--mid-gray);
+  bottom: 0px;
 }
 
 .hint-line {
-  font-size: 16px;
+  font-size: 14px;
   line-height: 20px;
 }