fix: vocabulary matching uniform box layout, no scroll #131

- Replace inline status text with compact icon bar + toast notifications
- Tile grid uses CSS Grid with equal fr rows/columns for uniform sizing
- Tiles use clamp() font-size to scale text within fixed cells
- overflow: hidden on activity-content prevents page scrolling
- Mobile: 2-col 8-row grid; landscape: 4-col 4-row tight layout
- All game feedback (match, miss, instructions) via ToastService

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: davidortinau

src/SentenceStudio.UI/Pages/VocabMatching.razor

@@ -45,23 +45,20 @@ else if (isBusy)
 }
 else if (tiles.Any())
 {
-    @* Status bar *@
-    <p class="ss-body1 text-center mb-3">
-        Matched: @matchedPairs / @totalPairs &nbsp;|&nbsp; Misses: @incorrectGuesses
-        @if (!string.IsNullOrEmpty(gameMessage))
-        {
-            <br /><small class="text-secondary-ss">@gameMessage</small>
-        }
-    </p>
+    @* Compact status — single line, no wrapping *@
+    <div class="matching-status-bar">
+        <span><i class="bi bi-check-circle-fill text-success"></i> @matchedPairs/@totalPairs</span>
+        <span><i class="bi bi-x-circle-fill text-danger"></i> @incorrectGuesses</span>
+    </div>
 
-    @* Tile grid — fills remaining height *@
+    @* Tile grid — uniform boxes, fills remaining height, no scroll *@
     <div class="matching-tile-grid flex-grow-1">
         @foreach (var tile in tiles)
         {
             var t = tile;
             if (!t.IsVisible && !t.IsMatched)
             {
-                <div></div>
+                <div class="matching-tile-placeholder"></div>
                 continue;
             }
 
@@ -70,10 +67,10 @@ else if (tiles.Any())
             var opacity = t.IsMatched ? "0.3" : "1.0";
             var cursor = t.IsMatched ? "default" : "pointer";
 
-            <div class="card card-ss clickable text-center @bgClass"
-                 style="cursor: @cursor; opacity: @opacity; border-width: 2px !important; display: flex; align-items: center; justify-content: center;"
+            <div class="matching-tile @bgClass"
+                 style="cursor: @cursor; opacity: @opacity;"
                  @onclick="() => OnTileTapped(t)">
-                <span class="ss-title3 @textClass">@t.Text</span>
+                <span class="@textClass">@t.Text</span>
             </div>
         }
     </div>
@@ -109,7 +106,6 @@ else
     private bool isBusy;
     private bool isGameComplete;
     private bool hideNativeWordsMode = true;
-    private string gameMessage = "";
     private int matchedPairs;
     private int totalPairs;
     private int incorrectGuesses;
@@ -129,7 +125,6 @@ else
     private async Task LoadVocabulary()
     {
         isBusy = true;
-        gameMessage = "";
         try
         {
             var resourceIds = ParseResourceIds();
@@ -150,7 +145,7 @@ else
 
             if (!allWords.Any())
             {
-                gameMessage = "No vocabulary available.";
+                Toast.ShowWarning("No vocabulary available.");
                 isBusy = false;
                 return;
             }
@@ -215,7 +210,8 @@ else
             incorrectGuesses = 0;
             isGameComplete = false;
             selectedTiles.Clear();
-            gameMessage = hideNativeWordsMode ? "Tap a target word to reveal native words" : "Match the pairs!";
+            var hint = hideNativeWordsMode ? "Tap a target word to reveal native words" : "Match the pairs!";
+            Toast.ShowInfo(hint, 2000);
         }
         catch (Exception ex)
         {
@@ -258,10 +254,9 @@ else
         }
 
         if (selectedTiles.Count == 1)
-            gameMessage = "Select another tile";
+            Toast.ShowInfo("Now pick the match", 1500);
         else if (selectedTiles.Count == 2)
         {
-            gameMessage = "Checking...";
             _ = CheckMatchWithDelay();
         }
     }
@@ -275,11 +270,9 @@ else
         {
             foreach (var t in tiles.Where(t => t.Language == "native" && !t.IsMatched))
                 t.IsVisible = false;
-            gameMessage = "Tap a target word to reveal native words";
         }
         else
         {
-            gameMessage = "Match the pairs!";
         }
     }
 
@@ -348,7 +341,7 @@ else
             tile2.IsSelected = false;
             selectedTiles.Clear();
             matchedPairs++;
-            gameMessage = "Great match!";
+            Toast.ShowSuccess("Great match!", 1500);
 
             if (hideNativeWordsMode)
             {
@@ -359,7 +352,6 @@ else
             if (matchedPairs >= totalPairs)
             {
                 isGameComplete = true;
-                gameMessage = "";
                 foreach (var t in tiles) t.IsVisible = true;
                 Toast.ShowSuccess("All pairs matched!");
             }
@@ -370,7 +362,7 @@ else
             tile2.IsSelected = false;
             selectedTiles.Clear();
             incorrectGuesses++;
-            gameMessage = "Not a match. Try again!";
+            Toast.ShowWarning("Not a match — try again!", 1500);
 
             if (hideNativeWordsMode)
             {
@@ -388,7 +380,6 @@ else
         totalPairs = 0;
         incorrectGuesses = 0;
         isGameComplete = false;
-        gameMessage = "";
         await LoadVocabulary();
     }
 

src/SentenceStudio.UI/wwwroot/css/app.css

@@ -1417,17 +1417,70 @@ h3:focus,
 }
 
 /* ─── Vocabulary Matching tile grid ─── */
+/* ─── Vocabulary Matching — uniform tiles, no scroll ─── */
+
+.matching-status-bar {
+    display: flex;
+    justify-content: center;
+    gap: 1.25rem;
+    padding: 0.25rem 0;
+    font-size: 0.875rem;
+    flex-shrink: 0;
+}
+
 .matching-tile-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     grid-template-rows: repeat(4, 1fr);
-    gap: 0.75rem;
-    align-content: stretch;
+    gap: 0.5rem;
     min-height: 0;
+    overflow: hidden;
 }
+
+.matching-tile,
+.matching-tile-placeholder {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 2px solid var(--bs-border-color);
+    border-radius: var(--bs-border-radius);
+    background: var(--bs-body-bg);
+    padding: 0.25rem;
+    overflow: hidden;
+    text-align: center;
+    font-size: clamp(0.7rem, 2vw, 1rem);
+    line-height: 1.2;
+    word-break: break-word;
+    min-width: 0;
+    min-height: 0;
+}
+
+.matching-tile-placeholder {
+    border-color: transparent;
+    background: transparent;
+}
+
 @media (max-width: 768px) {
     .matching-tile-grid {
         grid-template-columns: repeat(2, 1fr);
+        grid-template-rows: repeat(8, 1fr);
+        gap: 0.375rem;
+    }
+
+    .matching-tile {
+        font-size: clamp(0.75rem, 3.5vw, 1rem);
+    }
+}
+
+@media (orientation: landscape) and (max-height: 500px) {
+    .matching-tile-grid {
+        grid-template-columns: repeat(4, 1fr);
+        grid-template-rows: repeat(4, 1fr);
+        gap: 0.25rem;
+    }
+
+    .matching-tile {
+        font-size: clamp(0.65rem, 2vw, 0.85rem);
     }
 }