fix: made solution-list 80ch and font sizes

client/pages/UserPage.tsx

@@ -11,37 +11,39 @@ type RouteProps = {
 }
 
 export const UserPage = ({ uid }: RouteProps) => {
-
     const [user] = useCurrentUser()
 
     const [stats] = useResource<null | Record<string, SolutionStat>>(`/api/stats`, null)
-    if(stats) {
+    if (stats) {
         const userStats = stats[uid]
 
-            const [solutions, refreshSolutions] = useResource<SolutionModel[]>(`/api/solutions?user=${uid}&public`, [])
+        const [solutions, refreshSolutions] = useResource<SolutionModel[]>(`/api/solutions?user=${uid}&public`, [])
-            const sortedSolutions = sortByStringKey(solutions, s => s.createdAt, false)
+        const sortedSolutions = sortByStringKey(solutions, s => s.createdAt, false)
 
-            return (
+        return (
             <>
                 <Header />
                 <main class="page-profile">
-                    <div class="subtitle">Profilo di <a href={prependBaseUrl(`/u/${uid}`)}>@{uid}</a></div>
+                    <div class="title">
+                        Profilo di <a href={prependBaseUrl(`/u/${uid}`)}>@{uid}</a>
+                    </div>
                     <hr />
                     <div class="subtitle">Statistiche</div>
                     <div class="info">
                         <div>Soluzioni inviate</div>
                         <div>Soluzioni corrette</div>
-                        <div class="info-box">
+                        <div class="info-box">{userStats.sentSolutionsCount}</div>
-                            {userStats.sentSolutionsCount}
+                        <div class="info-box">{userStats.correctSolutionsCount}</div>
-                        </div>
-                        <div class="info-box">
-                            {userStats.correctSolutionsCount}
-                        </div>
                     </div>
+                    <hr />
                     <div class="subtitle">Soluzioni notevoli</div>
                     <div class="solution-list">
                         {sortedSolutions.map(solution => (
-                            <Solution refreshSolution={refreshSolutions} {...solution} adminControls={user !== null && isAdministrator(user.role)} />
+                            <Solution
+                                refreshSolution={refreshSolutions}
+                                {...solution}
+                                adminControls={user !== null && isAdministrator(user.role)}
+                            />
                         ))}
                     </div>
                 </main>

client/styles/main.scss

@@ -304,6 +304,10 @@ main {
         gap: 0.5rem;
     }
 
+    .title {
+        font-size: 32px;
+    }
+
     .subtitle {
         font-size: 28px;
     }
@@ -495,6 +499,9 @@ details {
     align-items: center;
     gap: 1rem;
 
+    width: 100%;
+    max-width: 80ch;
+
     .controls {
         display: flex;
         width: 100%;