Make sure current word is not transparent

Author: miorel

src/Rounds.module.css

@@ -1,12 +1,20 @@
 .container {
   height: 35%;
-  mask-image: linear-gradient(transparent, rgb(0 0 0 / 100%));
-  overflow: hidden;
-
-  gap: 1.5vw;
 }
 
 /* double specificity to override other style */
-.container.container {
+.container.container,
+.innerContainer.innerContainer {
   justify-content: flex-end;
 }
+
+.innerContainer {
+  flex-grow: 1;
+  mask-image: linear-gradient(transparent, rgb(0 0 0 / 100%));
+}
+
+.container,
+.innerContainer {
+  gap: 1.5vw;
+  overflow: hidden;
+}

src/Rounds.tsx

@@ -12,19 +12,21 @@ type Props = {
 export default function Rounds({ currentRound, finishedRounds }: Props) {
   return (
     <div className={`${styles.container} centered-container flex-col`}>
-      {finishedRounds.map(({ wordUnscrambled: word, status }, index) => (
-        <Word
-          key={index}
-          word={word}
-          color={
-            status === "guessed"
-              ? "positive"
-              : status === "skipped"
-                ? "negative"
-                : undefined
-          }
-        />
-      ))}
+      <div className={`${styles.innerContainer} centered-container flex-col`}>
+        {finishedRounds.map(({ wordUnscrambled: word, status }, index) => (
+          <Word
+            key={index}
+            word={word}
+            color={
+              status === "guessed"
+                ? "positive"
+                : status === "skipped"
+                  ? "negative"
+                  : undefined
+            }
+          />
+        ))}
+      </div>
       {currentRound && <Word word={currentRound.wordScrambled} />}
     </div>
   );