From a98895d93594eb245debd0c6275c0b51e1732b04 Mon Sep 17 00:00:00 2001
From: Marco Allegretti <mightymarco4@gmail.com>
Date: Mon, 2 Feb 2026 18:17:48 +0100
Subject: [PATCH] ui: responsive fixes for core flows

---
 frontend/src/layouts/Layout.astro             | 32 +++++++++
 .../src/pages/communities/[slug]/index.astro  | 69 +++++++++++++++++++
 .../communities/[slug]/proposals/index.astro  | 10 +++
 .../communities/[slug]/proposals/new.astro    | 10 +++
 frontend/src/pages/proposals.astro            | 14 ++++
 frontend/src/pages/proposals/[id].astro       | 32 +++++++++
 6 files changed, 167 insertions(+)

diff --git a/frontend/src/layouts/Layout.astro b/frontend/src/layouts/Layout.astro
index 466829a..535dcb5 100644
--- a/frontend/src/layouts/Layout.astro
+++ b/frontend/src/layouts/Layout.astro
@@ -200,6 +200,12 @@ const publicDemoSite = isEnabled((globalThis as any).process?.env?.PUBLIC_DEMO_S
     z-index: 100;
   }
 
+  @media (max-width: 640px) {
+    .header {
+      padding: 0.875rem 1rem;
+    }
+  }
+
   .nav {
     max-width: 1200px;
     margin: 0 auto;
@@ -208,6 +214,14 @@ const publicDemoSite = isEnabled((globalThis as any).process?.env?.PUBLIC_DEMO_S
     align-items: center;
   }
 
+  @media (max-width: 640px) {
+    .nav {
+      flex-wrap: wrap;
+      justify-content: center;
+      gap: 0.75rem;
+    }
+  }
+
   .logo {
     font-size: 1.375rem;
     font-weight: 700;
@@ -224,6 +238,15 @@ const publicDemoSite = isEnabled((globalThis as any).process?.env?.PUBLIC_DEMO_S
     gap: 2rem;
   }
 
+  @media (max-width: 640px) {
+    .nav-links {
+      width: 100%;
+      justify-content: center;
+      gap: 0.5rem;
+      flex-wrap: wrap;
+    }
+  }
+
   .nav-links a {
     color: var(--color-text-muted);
     padding: 0.5rem 0.875rem;
@@ -250,6 +273,15 @@ const publicDemoSite = isEnabled((globalThis as any).process?.env?.PUBLIC_DEMO_S
     align-items: center;
   }
 
+  @media (max-width: 640px) {
+    .nav-auth {
+      width: 100%;
+      justify-content: center;
+      flex-wrap: wrap;
+      gap: 0.5rem;
+    }
+  }
+
   .nav-auth a {
     color: var(--color-text-muted);
   }
diff --git a/frontend/src/pages/communities/[slug]/index.astro b/frontend/src/pages/communities/[slug]/index.astro
index e9ed134..4e6b988 100644
--- a/frontend/src/pages/communities/[slug]/index.astro
+++ b/frontend/src/pages/communities/[slug]/index.astro
@@ -423,6 +423,22 @@ const { slug } = Astro.params;
     flex-wrap: wrap;
   }
 
+  @media (max-width: 640px) {
+    .hero-actions {
+      justify-content: flex-start;
+    }
+
+    .hero-actions :global(.ui-btn) {
+      flex: 1 1 160px;
+    }
+  }
+
+  @media (max-width: 420px) {
+    .hero-actions :global(.ui-btn) {
+      flex-basis: 100%;
+    }
+  }
+
   .hero-desc {
     margin: 0.75rem 0 0;
     color: var(--color-text-muted);
@@ -458,6 +474,24 @@ const { slug } = Astro.params;
     max-width: 500px;
   }
 
+  @media (max-width: 640px) {
+    .edit-modal {
+      padding: 1rem;
+      align-items: flex-start;
+    }
+
+    .modal-content {
+      max-width: 100%;
+      max-height: calc(100vh - 2rem);
+      overflow: auto;
+    }
+
+    .modal-actions {
+      flex-direction: column;
+      align-items: stretch;
+    }
+  }
+
   .modal-content h2 {
     margin-bottom: 1.5rem;
   }
@@ -484,6 +518,24 @@ const { slug } = Astro.params;
     color: var(--color-text);
   }
 
+  @media (max-width: 640px) {
+    .proposal-item {
+      align-items: flex-start;
+      gap: 0.5rem;
+    }
+
+    .proposal-title {
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .proposal-status {
+      flex: 0 0 auto;
+    }
+  }
+
   .proposal-item:hover {
     background: var(--color-border);
   }
@@ -566,6 +618,23 @@ const { slug } = Astro.params;
     color: var(--color-text);
   }
 
+  @media (max-width: 640px) {
+    .member-item {
+      gap: 0.75rem;
+    }
+
+    .member-name {
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .member-role {
+      flex: 0 0 auto;
+    }
+  }
+
   .member-item:hover .member-name {
     color: var(--color-primary);
   }
diff --git a/frontend/src/pages/communities/[slug]/proposals/index.astro b/frontend/src/pages/communities/[slug]/proposals/index.astro
index 56b9b46..125f809 100644
--- a/frontend/src/pages/communities/[slug]/proposals/index.astro
+++ b/frontend/src/pages/communities/[slug]/proposals/index.astro
@@ -276,9 +276,19 @@ const { slug } = Astro.params;
     gap: 0.75rem;
   }
 
+  @media (max-width: 640px) {
+    .proposal-header {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+  }
+
   .proposal-card h3 {
     font-size: 1.25rem;
     letter-spacing: -0.01em;
+    margin: 0;
+    min-width: 0;
+    overflow-wrap: anywhere;
   }
 
   .proposal-meta {
diff --git a/frontend/src/pages/communities/[slug]/proposals/new.astro b/frontend/src/pages/communities/[slug]/proposals/new.astro
index 8561a58..239238f 100644
--- a/frontend/src/pages/communities/[slug]/proposals/new.astro
+++ b/frontend/src/pages/communities/[slug]/proposals/new.astro
@@ -141,6 +141,16 @@ const { slug } = Astro.params;
     margin-bottom: 0.5rem;
   }
 
+  @media (max-width: 420px) {
+    .option-input {
+      flex-wrap: wrap;
+    }
+
+    .option-input :global(.ui-btn) {
+      width: 100%;
+    }
+  }
+
   .option-input input {
     flex: 1;
   }
diff --git a/frontend/src/pages/proposals.astro b/frontend/src/pages/proposals.astro
index b44fab0..3761bba 100644
--- a/frontend/src/pages/proposals.astro
+++ b/frontend/src/pages/proposals.astro
@@ -169,6 +169,13 @@ import { API_BASE as apiBase } from '../lib/api';
     gap: 0.75rem;
   }
 
+  @media (max-width: 640px) {
+    .proposal-header {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+  }
+
   .proposal-card h3 {
     font-size: 1.25rem;
     letter-spacing: -0.01em;
@@ -198,6 +205,13 @@ import { API_BASE as apiBase } from '../lib/api';
     border-top: 1px solid var(--color-border);
   }
 
+  @media (max-width: 640px) {
+    .proposal-stats {
+      flex-wrap: wrap;
+      gap: 0.5rem 1rem;
+    }
+  }
+
   .proposal-stats .stat {
     font-size: 0.75rem;
     color: var(--color-text-muted);
diff --git a/frontend/src/pages/proposals/[id].astro b/frontend/src/pages/proposals/[id].astro
index 7b25c8a..2b2ac4f 100644
--- a/frontend/src/pages/proposals/[id].astro
+++ b/frontend/src/pages/proposals/[id].astro
@@ -680,6 +680,7 @@ const proposalId = id ?? '';
   .meta {
     color: var(--color-text-muted);
     font-size: 0.875rem;
+    overflow-wrap: anywhere;
   }
 
   .author-link {
@@ -711,6 +712,18 @@ const proposalId = id ?? '';
     padding: 1rem;
   }
 
+  @media (max-width: 640px) {
+    .option {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 0.75rem;
+    }
+
+    .vote-count {
+      align-self: flex-end;
+    }
+  }
+
   .option.votable {
     cursor: pointer;
     transition: border-color 0.2s;
@@ -802,6 +815,24 @@ const proposalId = id ?? '';
     max-width: 500px;
   }
 
+  @media (max-width: 640px) {
+    .edit-modal {
+      padding: 1rem;
+      align-items: flex-start;
+    }
+
+    .modal-content {
+      max-width: 100%;
+      max-height: calc(100vh - 2rem);
+      overflow: auto;
+    }
+
+    .modal-actions {
+      flex-direction: column;
+      align-items: stretch;
+    }
+  }
+
   .modal-content h2 {
     margin-bottom: 1.5rem;
   }
@@ -856,6 +887,7 @@ const proposalId = id ?? '';
   .star-rating {
     display: flex;
     gap: 0.25rem;
+    flex-wrap: wrap;
   }
 
   .star {