Don't use line clamping when there's nothing to clamp. Also inline ja…

…strow line clamping logic to be only in JS
ronshapiro · Nov 11, 2024 · 6e9cd88 · 6e9cd88
1 parent 268246d
commit 6e9cd88
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 10 deletions.
diff --git a/css/main.css b/css/main.css
@@ -160,10 +160,6 @@ html, body {
 
     float: none;
 }
-
-.jastrow .english { /* commentaryKind.className */
-    -webkit-line-clamp: 3 !important;
-}
 .commentary_header {
     text-decoration: underline;
     display: inline-block;

diff --git a/js/TableRow.tsx b/js/TableRow.tsx
@@ -340,6 +340,10 @@ function TableRow(props: TableRowProps): React.ReactElement {
       return {shouldWrap: false, englishLineClampLines: 1000000};
     }
 
+    if (classes.includes("jastrow")) {
+      return {shouldWrap: false, englishLineClampLines: 3};
+    }
+
     applyHiddenNode(hebrew, hiddenHost.hebrew);
     applyHiddenNode(english, hiddenHost.english);
 
@@ -368,12 +372,12 @@ function TableRow(props: TableRowProps): React.ReactElement {
     $(context.hiddenHost).width(), // recalculate only when there are changes in width
   ]);
 
-  const cellClasses = () => {
+  const cellClasses = (() => {
     if ((isEmptyText(hebrew) || isEmptyText(english)) && !overrideFullRow) {
       return ["fullRow"];
     }
     return [];
-  };
+  })();
 
   const cells = [];
   if (!isEmptyText(hebrew)) {
@@ -386,22 +390,27 @@ function TableRow(props: TableRowProps): React.ReactElement {
       <HebrewCell
         key="hebrew"
         text={contents}
-        classes={cellClasses()}
+        classes={cellClasses}
         hebrewDoubleClickListener={hebrewDoubleClickListener}
         isEnglishExpanded={isEnglishExpanded}
         shouldWrap={shouldWrap}
         />);
   }
   cells.push(<div className="text-selection-divider" key="text-selection-divider" />);
   if (!isEmptyText(english)) {
-    const toggleEnglishExpanded = () => setIsEnglishExpanded(previousState => !previousState);
+    const [overrideExpandedEnglish, toggleEnglishExpanded] = (() => {
+      if (cellClasses.includes("fullRow") && !classes.includes("jastrow")) {
+        return [true, () => {}];
+      }
+      return [isEnglishExpanded, () => setIsEnglishExpanded(previousState => !previousState)];
+    })();
     cells.push(
       <EnglishCell
         key="english"
         text={english}
-        classes={cellClasses()}
+        classes={cellClasses}
         toggleEnglishExpanded={toggleEnglishExpanded}
-        isEnglishExpanded={isEnglishExpanded}
+        isEnglishExpanded={overrideExpandedEnglish}
         lineClampLines={englishLineClampLines}
         shouldWrap={shouldWrap}
         />);