feat: ora funge decentemente anche su mobile

client/pages/ScoresPage.tsx

@@ -1,6 +1,7 @@
 import { useContext, useState } from 'preact/hooks'
 import { SolutionStat } from '../../shared/model'
 import { sortByNumericKey, sortByStringKey } from '../../shared/utils'
+import { prependBaseUrl } from '../api'
 import { Header } from '../components/Header'
 
 import { useResource, MetadataContext } from '../hooks'
@@ -49,6 +50,7 @@ export const ScoresPage = () => {
             <Header />
             <main class="page-scores">
                 <div class="subtitle">Classifica</div>
+                <div class="scrollable">
                     <div class="table">
                         <div class="cell header">
                             <span>Studente</span>
@@ -88,12 +90,15 @@ export const ScoresPage = () => {
                         </div>
                         {orderedStats.map(([user, s]) => (
                             <>
-                            <div class="cell">{user}</div>
+                                <div class="cell">
+                                    <a href={prependBaseUrl(`/u/${user}`)}>@{user}</a>
+                                </div>
                                 <div class="cell">{s.sentSolutionsCount}</div>
                                 <div class="cell">{s.correctSolutionsCount}</div>
                             </>
                         ))}
                     </div>
+                </div>
             </main>
         </>
     )

client/styles/main.scss

@@ -348,12 +348,20 @@ main.page-problem {
 }
 
 main.page-scores {
+    .scrollable {
+        display: flex;
+        overflow: auto;
+
+        max-width: 100%;
+        padding: 1rem;
+
         .table {
             display: grid;
+
             grid-template-columns: auto auto auto;
 
             box-shadow: -2px 4px 6px 1px #00000018, 0 0 4px 0px #00000010;
-        border: 1px solid #ddd;
+            // border: 1px solid #ddd;
             border-radius: 0.5rem;
             background: #ffffff;
 
@@ -365,32 +373,45 @@ main.page-scores {
                 place-content: center;
             }
 
-        overflow: hidden;
-
             position: relative;
 
             .cell {
-            padding: 1rem 1rem 1rem 2rem;
+                padding: 1rem 2rem;
 
                 gap: 0.5rem;
 
                 border-left: 1px solid #ddd;
                 border-top: 1px solid #ddd;
 
-            &:nth-child(3n + 1) {
-                border-left: none;
+                &:nth-child(3n + 3) {
+                    border-right: 1px solid #ddd;
                 }
 
-            &:nth-child(1),
-            &:nth-child(2),
+                &:nth-last-child(1),
+                &:nth-last-child(2),
+                &:nth-last-child(3) {
+                    border-bottom: 1px solid #ddd;
+                }
+
+                &:first-child {
+                    border-top-left-radius: 0.5rem;
+                }
                 &:nth-child(3) {
-                border-top: none;
+                    border-top-right-radius: 0.5rem;
+                }
+                &:nth-last-child(3) {
+                    border-bottom-left-radius: 0.5rem;
+                }
+                &:last-child {
+                    border-bottom-right-radius: 0.5rem;
                 }
 
                 &.header {
                     font-weight: 400;
                     font-size: 22px;
 
+                    padding-right: 1rem;
+
                     background: #f0f0f0;
 
                     display: flex;
@@ -442,6 +463,7 @@ main.page-scores {
             }
         }
     }
+}
 
 //
 // Components