diff --git a/physics/templates/physics/exam_take_overview.html b/physics/templates/physics/exam_take_overview.html index 300b6085..0b213410 100644 --- a/physics/templates/physics/exam_take_overview.html +++ b/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 } }