From 956834617b034711696464859c9701a0b7369a2c Mon Sep 17 00:00:00 2001
From: Musiker15 <info@musiker15.de>
Date: Fri, 3 Jul 2026 14:28:10 +0200
Subject: [PATCH] fix(mobile): wrap forms-list actions and space the schedule
 banner

- Forms list (dashboard): the per-form action buttons sat in a non-wrapping
  shrink-0 row and ran off the right edge on narrow screens. The row now stacks
  below the form info on mobile and the buttons wrap; on sm+ it stays a
  right-aligned row. The header actions wrap too.
- Public form page: the "closes at" / "ending soon" banner had no gap to the
  form below, so it crowded the multi-step progress. Added bottom spacing.
---
 apps/web/src/app/dashboard/[guildId]/forms/page.tsx | 8 ++++----
 apps/web/src/app/f/[slug]/page.tsx                  | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/app/dashboard/[guildId]/forms/page.tsx b/apps/web/src/app/dashboard/[guildId]/forms/page.tsx
index abc6842..0cbdfe3 100644
--- a/apps/web/src/app/dashboard/[guildId]/forms/page.tsx
+++ b/apps/web/src/app/dashboard/[guildId]/forms/page.tsx
@@ -74,11 +74,11 @@ export default async function GuildFormsPage({
 
   return (
     <div className="flex flex-col gap-4">
-      <div className="flex items-center justify-between">
+      <div className="flex flex-wrap items-center justify-between gap-3">
         <h2 className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
           {forms.length} {forms.length === 1 ? t.countForm : t.countForms}
         </h2>
-        <div className="flex items-center gap-2">
+        <div className="flex flex-wrap items-center gap-2">
         {canUpgradeToEnterprise && (
           <UpgradeActions guildId={guildId} enterpriseLabel={dict.pro.upgradeEnterprise} />
         )}
@@ -124,7 +124,7 @@ export default async function GuildFormsPage({
             const sched = formScheduleStatus(form.openAt, form.closeAt, new Date());
             return (
               <Card key={form.id} className="flex flex-col gap-3 p-4">
-                <div className="flex items-center justify-between gap-4">
+                <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between sm:gap-4">
                   <div className="flex min-w-0 flex-col gap-1">
                     <div className="flex items-center gap-3">
                       <span className="truncate font-medium text-foreground">{form.title}</span>
@@ -171,7 +171,7 @@ export default async function GuildFormsPage({
                       )}
                     </span>
                   </div>
-                  <div className="flex shrink-0 items-center gap-2">
+                  <div className="flex flex-wrap items-center gap-2 sm:shrink-0 sm:justify-end">
                     {form._count.submissions > 0 && (
                       <div className="flex items-center gap-2.5 rounded-md border border-border px-3 py-1.5 text-sm font-medium text-muted-foreground">
                         <span className="text-xs uppercase tracking-wide">{t.exportLabel}</span>
diff --git a/apps/web/src/app/f/[slug]/page.tsx b/apps/web/src/app/f/[slug]/page.tsx
index 7410221..89cfd01 100644
--- a/apps/web/src/app/f/[slug]/page.tsx
+++ b/apps/web/src/app/f/[slug]/page.tsx
@@ -162,7 +162,7 @@ export default async function PublicFormPage({
       )}
       {form.closeAt && (
         <p
-          className={`rounded-md border px-3 py-2 text-sm ${
+          className={`mb-5 rounded-md border px-3 py-2 text-sm ${
             schedule.endingSoon
               ? "border-amber-500/40 bg-amber-500/10 font-medium text-amber-600 dark:text-amber-400"
               : "border-border bg-muted/40 text-muted-foreground"