FormsTable is full-width for verbs & adjj that have comparatives

DuncanRitchie · Mar 7, 2024 · 553078a · 553078a
1 parent ff4d4d1
commit 553078a
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 3 deletions.
diff --git a/components/lemma/FormsTable.jsx b/components/lemma/FormsTable.jsx
@@ -181,6 +181,7 @@ const FormsTable = ({
   linkBase,
   currentWordHyphenated,
   openByDefault = true,
+  isFullWidth = false,
 }) => {
   const isDisplayedInTabs = !!(
     Forms.unencliticized ||
@@ -208,7 +209,11 @@ const FormsTable = ({
     />
   )
 
-  return <div className={styles.formsTable}>{formsTable}</div>
+  const classNames = isFullWidth
+    ? styles.formsTable + ' ' + styles.fullWidth
+    : styles.formsTable
+
+  return <div className={classNames}>{formsTable}</div>
 }
 
 export default FormsTable
diff --git a/components/lemma/FormsTable.module.css b/components/lemma/FormsTable.module.css
@@ -1,17 +1,26 @@
 .formsTable {
   --forms-offset-left: 1.5rem;
   --forms-offset-left: clamp(1rem, 5vw, 1.5rem);
+  --forms-table-margin-inline: 0rem;
+  width: calc(100% + 2 * var(--forms-table-margin-inline));
+  margin-left: calc(-1 * var(--forms-table-margin-inline));
+}
+
+.formsTable.fullWidth {
+  --forms-offset-left: calc(clamp(1rem, 5vw, 1.5rem) / 2);
+  --forms-table-margin-inline: calc(50vw - 1rem - var(--page-width) / 2);
 }
 
 .formsTable details {
   text-align: left;
   tab-size: 2;
-  margin-left: 1rem;
-  width: calc(100% - 2rem);
+  margin-inline: 1rem;
+  min-width: calc(100% - 2rem);
 }
 
 .formsTable summary {
   width: max-content;
+  margin-left: var(--forms-table-margin-inline);
   margin-right: auto;
   margin-bottom: 0.5em;
   padding: 0;
@@ -95,9 +104,15 @@
   z-index: 1 /* must be in front of dashes */;
 }
 
+.formsTable.fullWidth dt {
+  font-size: 0.75em;
+  opacity: 0.5;
+}
+
 .formsTable dl div:hover > dt {
   background-image: linear-gradient(to bottom right, #efe1ab, transparent);
   border-color: #34311a;
+  opacity: 1;
 }
 
 .formsTable dd {

diff --git a/components/lemma/Tabs.module.css b/components/lemma/Tabs.module.css
@@ -13,6 +13,8 @@
 .tabs > ul {
   margin-top: 0.25rem;
   min-width: 100%;
+  min-width: calc(100% - 2 * var(--forms-table-margin-inline, 0));
+  margin-left: var(--forms-table-margin-inline, 0);
 }
 
 .tabs [role='tab'],
@@ -61,6 +63,10 @@
   padding: 0.5rem;
   border: 1px solid #58522c;
   border-radius: 0 0.3333rem 0.3333rem;
+  /* The top-left corner is only rounded if --forms-table-margin-inline is more than what the rounding would be. */
+  border-top-left-radius: calc(
+    max(min(var(--forms-table-margin-inline, 0rem), 0.3333rem), 0rem)
+  );
   background: #fffdf4;
   overflow-x: auto;
   scroll-margin-top: 5rem;