fix #209 + overscrolling issue

herbie-fp · Nov 22, 2024 · 79af0a8 · 79af0a8
1 parent c262b4a
commit 79af0a8
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 12 deletions.
diff --git a/src/herbie/ExpressionTable.css b/src/herbie/ExpressionTable.css
@@ -19,6 +19,7 @@
 
 .expressions-actual {
   scrollbar-width: 11px !important;
+  overscroll-behavior: contain; /* Don't scroll beyond set expressions table area */
 }
 
 .tex-toggle {
@@ -114,7 +115,6 @@
 
 .analysis {
   font-family: 'Ruda', serif;
-  margin-right: -15px;
   width: 80px; /* Fixed width to prevent resizing */
   display: flex;
   align-items: center; /* Center content vertically */
@@ -124,7 +124,7 @@
 .speedup {
   font-family: 'Ruda', serif;
   text-align: right;
-  width: 80px; /* Fixed width to prevent resizing */
+  width: 65px; /* Fixed width to prevent resizing and aligning .analysis */
   display: flex;
   align-items: center; /* Center content vertically */
   justify-content: flex-end; /* Align text to the right */
@@ -381,8 +381,15 @@
   width: 60%;
 }
 
+.expression-tex {
+  max-width: 555px;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
 .expression-name-container {
   flex: 1;
+  max-width: 565px;
 }
 
 #showTexCheckbox {

diff --git a/src/herbie/ExpressionTable.tsx b/src/herbie/ExpressionTable.tsx
@@ -333,11 +333,8 @@ function ExpressionTable() {
                   {showMath ?
                     <div className="expression-tex" dangerouslySetInnerHTML={{
                       __html:  KaTeX.renderToString(expression.tex, { throwOnError: false })
-                    }} style={{
-                          maxWidth: '350px',
-                          overflowX: 'auto',
-                          overflowY: 'hidden',
-                    }}/>
+                      }}
+                    />
                     :
                     <div className="expression-text" id={`` + expression.id}>
                       {expression.text}
@@ -359,8 +356,6 @@ function ExpressionTable() {
                       Improve
                     </button>
                   </div>
-
-
                   <div className="delete">
                     <button onClick={() =>{
                       setArchivedExpressions([...archivedExpressions, expression.id]);

diff --git a/src/herbie/HerbieUI.css b/src/herbie/HerbieUI.css
@@ -77,10 +77,8 @@ body {
   background-color: var(--background-color);
   font-family: "IBM Plex Serif", serif;
   padding: 0px;
-}
-
-body {
   margin: 0px;
+  overflow: hidden; /* Inner components manual set scroll, if needed */
 }