From 31953dcf5c925d1bedc9d0168b9684445aa444df Mon Sep 17 00:00:00 2001
From: Marco Allegretti <mightymarco4@gmail.com>
Date: Wed, 4 Feb 2026 01:03:56 +0100
Subject: [PATCH] ui: improve proposals list skeleton and typography

---
 frontend/src/pages/proposals.astro | 50 ++++++++++++++++++++++++++++++
 1 file changed, 50 insertions(+)

diff --git a/frontend/src/pages/proposals.astro b/frontend/src/pages/proposals.astro
index 3761bba..adbccb8 100644
--- a/frontend/src/pages/proposals.astro
+++ b/frontend/src/pages/proposals.astro
@@ -54,11 +54,36 @@ import { API_BASE as apiBase } from '../lib/api';
 <script define:vars={{ apiBase }}>
   let allProposals = [];
 
+  function renderSkeleton(count) {
+    const container = document.getElementById('proposals-list');
+    if (!container) return;
+    let html = '';
+    for (let i = 0; i < count; i++) {
+      html += `
+        <div class="proposal-card ui-card is-skeleton" aria-hidden="true">
+          <div class="proposal-header">
+            <div class="skel skel-title"></div>
+            <div class="skel skel-pill"></div>
+          </div>
+          <div class="skel skel-community"></div>
+          <div class="skel skel-desc"></div>
+          <div class="skel skel-desc short"></div>
+          <div class="proposal-stats">
+            <div class="skel skel-stat"></div>
+            <div class="skel skel-stat"></div>
+          </div>
+        </div>
+      `;
+    }
+    container.innerHTML = html;
+  }
+
   async function loadProposals() {
     const container = document.getElementById('proposals-list');
     if (!container) return;
 
     try {
+      renderSkeleton(8);
       const res = await fetch(`${apiBase}/api/proposals`);
       allProposals = await res.json();
       renderProposals(allProposals);
@@ -154,6 +179,12 @@ import { API_BASE as apiBase } from '../lib/api';
     transition: transform var(--motion-fast) var(--easing-standard), box-shadow var(--motion-fast) var(--easing-standard), border-color var(--motion-fast) var(--easing-standard), background var(--motion-fast) var(--easing-standard);
   }
 
+  @media (max-width: 640px) {
+    .proposal-card {
+      padding: 1rem;
+    }
+  }
+
   .proposal-card:hover {
     border-color: var(--color-border-hover);
     transform: translateY(-2px);
@@ -180,6 +211,13 @@ import { API_BASE as apiBase } from '../lib/api';
     font-size: 1.25rem;
     letter-spacing: -0.01em;
     margin: 0;
+    line-height: 1.25;
+  }
+
+  @media (max-width: 640px) {
+    .proposal-card h3 {
+      font-size: 1.125rem;
+    }
   }
 
   .community {
@@ -195,6 +233,11 @@ import { API_BASE as apiBase } from '../lib/api';
   .description {
     color: var(--color-text-muted);
     font-size: 0.875rem;
+    margin: 0;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
   }
 
   .proposal-stats {
@@ -216,4 +259,11 @@ import { API_BASE as apiBase } from '../lib/api';
     font-size: 0.75rem;
     color: var(--color-text-muted);
   }
+
+  .skel-title { height: 18px; width: 68%; }
+  .skel-pill { height: 14px; width: 88px; border-radius: 999px; }
+  .skel-community { height: 10px; width: 42%; margin-top: 0.5rem; }
+  .skel-desc { height: 12px; width: 100%; margin-top: 0.75rem; }
+  .skel-desc.short { width: 78%; margin-top: 0.5rem; }
+  .skel-stat { height: 10px; width: 120px; }
 </style>