Refactor styles for physics finish list and overview question buttons to improve responsiveness and layout on various screen sizes.

physics/templates/physics/exam_take_overview.html

@@ -106,19 +106,25 @@
 
     .physics-finish-list {
         display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
+        /* Limit the maximum width of each tile so buttons don't stretch too wide on large screens.
+           Each tile will be between 80px and 140px. The grid will wrap responsively. */
+        grid-template-columns: repeat(auto-fit, minmax(80px, 140px));
+        justify-content: start;
         gap: .5rem;
         align-items: stretch;
         margin-bottom: 1rem;
     }
 
     .overview-question-btn {
+        /* Fill the grid cell but the cell itself is capped by the grid-template-columns above. */
+        width: 100%;
+        box-sizing: border-box;
         text-align: left;
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
         padding: .5rem .75rem;
-        display: inline-flex;
+        display: flex;
         align-items: center;
         justify-content: flex-start;
     }
@@ -143,7 +149,8 @@
 
     @media (max-width: 575.98px) {
         .physics-finish-list {
-            grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
+            /* On very small screens allow slightly narrower tiles but still wrap */
+            grid-template-columns: repeat(auto-fit, minmax(70px, 110px));
         }
         .overview-question-btn { font-size: .95rem }
     }