diff --git a/apps/dashboard/src/app/(dashboard)/overview/create-event-button-group.tsx b/apps/dashboard/src/app/(dashboard)/overview/create-event-button-group.tsx
index 90e63c7b..8481710d 100644
--- a/apps/dashboard/src/app/(dashboard)/overview/create-event-button-group.tsx
+++ b/apps/dashboard/src/app/(dashboard)/overview/create-event-button-group.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { ChevronDown, Add } from "@openstatus/icons";
+import { ChevronDown } from "@openstatus/icons";
 import { Button } from "@openstatus/ui/components/ui/button";
 import { ButtonGroup } from "@openstatus/ui/components/ui/button-group";
 import {
@@ -26,7 +26,6 @@ export function CreateEventButtonGroup() {
       <ButtonGroup>
         <FormSheetStatusReportCreate>
           <Button data-section="action" variant="outline" size="sm">
-            <Add />
             Create Status Report
           </Button>
         </FormSheetStatusReportCreate>
@@ -43,12 +42,10 @@ export function CreateEventButtonGroup() {
           </DropdownMenuTrigger>
           <DropdownMenuContent align="end">
             <DropdownMenuItem onSelect={() => setMaintenanceOpen(true)}>
-              <Add className="text-muted-foreground" />
               Create Maintenance
             </DropdownMenuItem>
             {incidentsEnabled ? (
               <DropdownMenuItem onSelect={() => setIncidentOpen(true)}>
-                <Add className="text-muted-foreground" />
                 Declare Incident
               </DropdownMenuItem>
             ) : null}
diff --git a/apps/dashboard/src/app/(dashboard)/settings/account/page.tsx b/apps/dashboard/src/app/(dashboard)/settings/account/page.tsx
index f9466526..d56b7b71 100644
--- a/apps/dashboard/src/app/(dashboard)/settings/account/page.tsx
+++ b/apps/dashboard/src/app/(dashboard)/settings/account/page.tsx
@@ -60,12 +60,12 @@ export default function Page() {
             </FormCardDescription>
           </FormCardHeader>
           <FormCardContent>
-            <form className="grid gap-4">
-              <div className="grid gap-1.5">
+            <form className="grid gap-4 sm:grid-cols-3">
+              <div className="grid gap-1.5 sm:col-span-2">
                 <Label>Name</Label>
                 <Input defaultValue={user?.name ?? undefined} />
               </div>
-              <div className="grid gap-1.5">
+              <div className="grid gap-1.5 sm:col-span-2">
                 <Label>Email</Label>
                 <Input defaultValue={user?.email ?? undefined} />
               </div>
diff --git a/apps/dashboard/src/app/(dashboard)/status-pages/[id]/maintenances/(list)/page.tsx b/apps/dashboard/src/app/(dashboard)/status-pages/[id]/maintenances/(list)/page.tsx
index 65930a07..88dd8ab0 100644
--- a/apps/dashboard/src/app/(dashboard)/status-pages/[id]/maintenances/(list)/page.tsx
+++ b/apps/dashboard/src/app/(dashboard)/status-pages/[id]/maintenances/(list)/page.tsx
@@ -1,6 +1,5 @@
 "use client";
 
-import { Add } from "@openstatus/icons";
 import { Button } from "@openstatus/ui/components/ui/button";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { useParams } from "next/navigation";
@@ -82,7 +81,6 @@ export default function Page() {
               }}
             >
               <Button data-section="action" size="sm">
-                <Add />
                 Create Maintenance
               </Button>
             </FormSheetMaintenance>
diff --git a/apps/dashboard/src/app/(dashboard)/status-pages/[id]/status-reports/(list)/page.tsx b/apps/dashboard/src/app/(dashboard)/status-pages/[id]/status-reports/(list)/page.tsx
index 5ef268c1..86c6689e 100644
--- a/apps/dashboard/src/app/(dashboard)/status-pages/[id]/status-reports/(list)/page.tsx
+++ b/apps/dashboard/src/app/(dashboard)/status-pages/[id]/status-reports/(list)/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Impact, Add } from "@openstatus/icons";
+import { Impact } from "@openstatus/icons";
 import { Button } from "@openstatus/ui/components/ui/button";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import NextLink from "next/link";
@@ -129,7 +129,6 @@ export default function Page() {
               }}
             >
               <Button data-section="action" size="sm">
-                <Add />
                 Create Status Report
               </Button>
             </FormSheetStatusReport>
diff --git a/apps/dashboard/src/components/forms/components/form-components.tsx b/apps/dashboard/src/components/forms/components/form-components.tsx
index d44063e8..50a09d4f 100644
--- a/apps/dashboard/src/components/forms/components/form-components.tsx
+++ b/apps/dashboard/src/components/forms/components/form-components.tsx
@@ -11,7 +11,6 @@ import {
   Linked,
   Unlinked,
   Plug,
-  Add,
   Delete,
 } from "@openstatus/icons";
 import {
@@ -506,9 +505,8 @@ export function FormComponents({
                 Manage your page components
               </FormCardDescription>
             </FormCardHeader>
-            <FormCardContent className="flex flex-row gap-2">
+            <FormCardContent className="flex flex-col gap-2 sm:flex-row">
               <Button variant="outline" type="button" onClick={handleAddGroup}>
-                <Add />
                 Add Component Group
               </Button>
               <FormField
@@ -520,7 +518,6 @@ export function FormComponents({
                     <DropdownMenu>
                       <DropdownMenuTrigger asChild>
                         <Button variant="outline" className="w-full">
-                          <Add />
                           Add Component
                         </Button>
                       </DropdownMenuTrigger>
@@ -738,15 +735,15 @@ function ComponentRow({
       className={cn("rounded-md", className)}
       {...props}
     >
-      <div className="grid min-h-9 grid-cols-4 gap-2">
-        <div className="flex flex-row items-center gap-1 self-center">
-          <SortableItemHandle>
-            <DragHandle
-              size={16}
-              aria-hidden="true"
-              className="text-muted-foreground"
-            />
-          </SortableItemHandle>
+      <div className="grid min-h-9 grid-cols-[auto_minmax(0,1fr)_minmax(0,1fr)] gap-2 sm:grid-cols-[auto_repeat(4,minmax(0,1fr))]">
+        <SortableItemHandle className="row-span-2 self-center sm:row-span-1">
+          <DragHandle
+            size={16}
+            aria-hidden="true"
+            className="text-muted-foreground"
+          />
+        </SortableItemHandle>
+        <div className="flex items-center self-center">
           {fieldNamePrefix ? (
             <FormField
               key={`${component.id}-name-${fieldNamePrefix}`}
@@ -807,13 +804,13 @@ function ComponentRow({
             <Link
               href={`/monitors/${component.monitorId}/overview`}
               onClick={(e) => e.stopPropagation()}
-              className="flex w-full items-center gap-2 truncate py-1.5 text-sm"
+              className="flex w-full min-w-0 items-center gap-2 py-1.5 text-sm"
             >
               <Linked className="size-4 shrink-0" />{" "}
               <span className="truncate">{component.monitor.name}</span>
             </Link>
           ) : (
-            <span className="text-muted-foreground flex items-center gap-2 text-sm">
+            <span className="text-muted-foreground flex min-w-0 items-center gap-2 text-sm">
               <Unlinked className="size-4 shrink-0" />{" "}
               <span className="truncate">Static Component</span>
             </span>
@@ -998,15 +995,15 @@ function ComponentGroupRow({
 
   return (
     <SortableItem value={group.id} className="bg-muted rounded-md border">
-      <div className="grid grid-cols-4 gap-2 px-2 pt-2">
-        <div className="flex flex-row items-center gap-1 self-center">
-          <SortableItemHandle>
-            <DragHandle
-              size={16}
-              aria-hidden="true"
-              className="text-muted-foreground"
-            />
-          </SortableItemHandle>
+      <div className="grid grid-cols-[auto_minmax(0,1fr)_minmax(0,1fr)] gap-2 px-2 pt-2 sm:grid-cols-[auto_repeat(4,minmax(0,1fr))]">
+        <SortableItemHandle className="row-span-2 self-center sm:row-span-1">
+          <DragHandle
+            size={16}
+            aria-hidden="true"
+            className="text-muted-foreground"
+          />
+        </SortableItemHandle>
+        <div className="flex items-center self-center">
           <FormField
             key={`${group.id}-name-${groupIndex}`}
             control={form.control}
@@ -1031,13 +1028,12 @@ function ComponentGroupRow({
           control={form.control}
           name={`groups.${groupIndex}.components` as const}
           render={({ field }) => (
-            <FormItem className="flex flex-col">
+            <FormItem className="flex min-w-0 flex-col">
               <FormLabel className="sr-only">Components</FormLabel>
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
-                  <Button variant="outline" className="w-full">
-                    <Add />
-                    Add Component
+                  <Button variant="outline" className="w-full min-w-0">
+                    <span className="truncate">Add Component</span>
                   </Button>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent align="start">
@@ -1153,7 +1149,7 @@ function ComponentGroupRow({
           control={form.control}
           name={`groups.${groupIndex}.defaultOpen` as const}
           render={({ field }) => (
-            <FormItem className="flex items-center gap-2 self-center">
+            <FormItem className="flex min-w-0 items-center gap-2 self-center">
               <FormControl>
                 <Checkbox
                   className="bg-background"
@@ -1161,8 +1157,8 @@ function ComponentGroupRow({
                   onCheckedChange={field.onChange}
                 />
               </FormControl>
-              <FormLabel className="text-muted-foreground !mt-0 text-sm font-normal">
-                Open by default
+              <FormLabel className="text-muted-foreground !mt-0 min-w-0 text-sm font-normal">
+                <span className="truncate">Open by default</span>
               </FormLabel>
             </FormItem>
           )}
diff --git a/apps/dashboard/src/components/forms/components/form-import.tsx b/apps/dashboard/src/components/forms/components/form-import.tsx
index c08b8411..10bf5d5e 100644
--- a/apps/dashboard/src/components/forms/components/form-import.tsx
+++ b/apps/dashboard/src/components/forms/components/form-import.tsx
@@ -267,7 +267,7 @@ export function FormImport({
                           Checkly
                         </FormLabel>
                       </FormItem>
-                      <div className="text-muted-foreground col-span-1 self-end text-xs sm:place-self-end">
+                      <div className="text-muted-foreground col-span-full text-xs">
                         Missing a provider?{" "}
                         <a href="mailto:ping@openstatus.dev">Contact us</a>
                       </div>
@@ -281,12 +281,12 @@ export function FormImport({
           {watchProvider ? (
             <>
               <FormCardSeparator />
-              <FormCardContent className="grid gap-4">
+              <FormCardContent className="grid gap-4 sm:grid-cols-3">
                 <FormField
                   control={form.control}
                   name="apiKey"
                   render={({ field }) => (
-                    <FormItem>
+                    <FormItem className="sm:col-span-2">
                       <FormLabel>API Key</FormLabel>
                       <FormControl>
                         <Input
@@ -334,7 +334,7 @@ export function FormImport({
                     control={form.control}
                     name="statuspagePageId"
                     render={({ field }) => (
-                      <FormItem>
+                      <FormItem className="sm:col-span-2">
                         <FormLabel>Page ID (optional)</FormLabel>
                         <FormControl>
                           <Input placeholder="e.g. abc123def456" {...field} />
@@ -352,7 +352,7 @@ export function FormImport({
                     control={form.control}
                     name="betterstackStatusPageId"
                     render={({ field }) => (
-                      <FormItem>
+                      <FormItem className="sm:col-span-2">
                         <FormLabel>Status Page ID (optional)</FormLabel>
                         <FormControl>
                           <Input placeholder="e.g. 123456789" {...field} />
@@ -370,7 +370,7 @@ export function FormImport({
                     control={form.control}
                     name="instatusPageId"
                     render={({ field }) => (
-                      <FormItem>
+                      <FormItem className="sm:col-span-2">
                         <FormLabel>Page ID (optional)</FormLabel>
                         <FormControl>
                           <Input placeholder="e.g. clx1abc2def3" {...field} />
@@ -389,7 +389,7 @@ export function FormImport({
                       control={form.control}
                       name="checklyAccountId"
                       render={({ field }) => (
-                        <FormItem>
+                        <FormItem className="sm:col-span-2">
                           <FormLabel>Account ID</FormLabel>
                           <FormControl>
                             <Input placeholder="e.g. 1a2b3c4d-..." {...field} />
@@ -406,7 +406,7 @@ export function FormImport({
                       control={form.control}
                       name="checklyStatusPageId"
                       render={({ field }) => (
-                        <FormItem>
+                        <FormItem className="sm:col-span-2">
                           <FormLabel>Status Page ID (optional)</FormLabel>
                           <FormControl>
                             <Input placeholder="e.g. 1a2b3c4d-..." {...field} />
diff --git a/apps/dashboard/src/components/forms/monitor/form-general.tsx b/apps/dashboard/src/components/forms/monitor/form-general.tsx
index a86175ce..7f0d1478 100644
--- a/apps/dashboard/src/components/forms/monitor/form-general.tsx
+++ b/apps/dashboard/src/components/forms/monitor/form-general.tsx
@@ -350,11 +350,7 @@ export function FormGeneral({
                           </Tooltip>
                         );
                       })}
-                      <div
-                        className={cn(
-                          "text-muted-foreground col-span-1 self-end text-xs sm:place-self-end",
-                        )}
-                      >
+                      <div className="text-muted-foreground col-span-full text-xs">
                         Missing a type?{" "}
                         <a href="mailto:ping@openstatus.dev">Contact us</a>
                       </div>
diff --git a/apps/dashboard/src/components/forms/monitor/form-otel.tsx b/apps/dashboard/src/components/forms/monitor/form-otel.tsx
index 43190c5d..fad3f244 100644
--- a/apps/dashboard/src/components/forms/monitor/form-otel.tsx
+++ b/apps/dashboard/src/components/forms/monitor/form-otel.tsx
@@ -91,12 +91,12 @@ export function FormOtel({
               Configure your OpenTelemetry Exporter.
             </FormCardDescription>
           </FormCardHeader>
-          <FormCardContent className="grid grid-cols-4 gap-4">
+          <FormCardContent className="grid gap-4 sm:grid-cols-3">
             <FormField
               control={form.control}
               name="endpoint"
               render={({ field }) => (
-                <FormItem className="col-span-full">
+                <FormItem className="sm:col-span-2">
                   <FormLabel>Endpoint</FormLabel>
                   <FormControl>
                     <Input
diff --git a/apps/dashboard/src/components/forms/monitor/form-response-time.tsx b/apps/dashboard/src/components/forms/monitor/form-response-time.tsx
index 94e438b5..48160c39 100644
--- a/apps/dashboard/src/components/forms/monitor/form-response-time.tsx
+++ b/apps/dashboard/src/components/forms/monitor/form-response-time.tsx
@@ -81,7 +81,7 @@ export function FormResponseTime({
               Configure your degraded and timeout thresholds.
             </FormCardDescription>
           </FormCardHeader>
-          <FormCardContent className="grid gap-4 sm:grid-cols-2">
+          <FormCardContent className="grid gap-4 sm:grid-cols-3">
             <FormField
               control={form.control}
               name="degradedAfter"
diff --git a/apps/dashboard/src/components/forms/monitor/form-retry.tsx b/apps/dashboard/src/components/forms/monitor/form-retry.tsx
index e0543f95..4ceeb900 100644
--- a/apps/dashboard/src/components/forms/monitor/form-retry.tsx
+++ b/apps/dashboard/src/components/forms/monitor/form-retry.tsx
@@ -86,12 +86,12 @@ export function FormRetry({
               Configure the retry policy for your monitor.
             </FormCardDescription>
           </FormCardHeader>
-          <FormCardContent className="grid gap-4 sm:grid-cols-2">
+          <FormCardContent className="grid gap-4 sm:grid-cols-3">
             <FormField
               control={form.control}
               name="retry"
               render={({ field }) => (
-                <FormItem>
+                <FormItem className="sm:col-span-2">
                   <FormLabel>Retry</FormLabel>
                   <FormControl>
                     <Input
diff --git a/apps/dashboard/src/components/forms/monitor/form-tags.tsx b/apps/dashboard/src/components/forms/monitor/form-tags.tsx
index 7140c677..1b049b40 100644
--- a/apps/dashboard/src/components/forms/monitor/form-tags.tsx
+++ b/apps/dashboard/src/components/forms/monitor/form-tags.tsx
@@ -135,12 +135,12 @@ export function FormTags({
               Add tags to categorize and organize your monitor.
             </FormCardDescription>
           </FormCardHeader>
-          <FormCardContent className="grid gap-4 md:grid-cols-2">
+          <FormCardContent className="grid gap-4 sm:grid-cols-3">
             <FormField
               control={form.control}
               name="tags"
               render={({ field }) => (
-                <FormItem className="flex flex-col md:col-span-1">
+                <FormItem className="flex flex-col sm:col-span-2">
                   <FormLabel>Tags</FormLabel>
                   <Popover>
                     <PopoverTrigger asChild>
diff --git a/apps/dashboard/src/components/forms/settings/form-members.tsx b/apps/dashboard/src/components/forms/settings/form-members.tsx
index 8b6cd719..cd0cbec7 100644
--- a/apps/dashboard/src/components/forms/settings/form-members.tsx
+++ b/apps/dashboard/src/components/forms/settings/form-members.tsx
@@ -104,13 +104,13 @@ export function FormMembers({
             </Tabs>
           </FormCardContent>
           <FormCardSeparator />
-          <FormCardContent>
+          <FormCardContent className="grid gap-4 sm:grid-cols-3">
             <FormField
               control={form.control}
               disabled={locked}
               name="email"
               render={({ field }) => (
-                <FormItem>
+                <FormItem className="sm:col-span-2">
                   <FormLabel>Add member</FormLabel>
                   <FormControl>
                     <Input
diff --git a/apps/dashboard/src/components/forms/settings/form-workspace.tsx b/apps/dashboard/src/components/forms/settings/form-workspace.tsx
index 2091db45..ad06bd2a 100644
--- a/apps/dashboard/src/components/forms/settings/form-workspace.tsx
+++ b/apps/dashboard/src/components/forms/settings/form-workspace.tsx
@@ -75,12 +75,12 @@ export function FormWorkspace({
               Manage your workspace name.
             </FormCardDescription>
           </FormCardHeader>
-          <FormCardContent>
+          <FormCardContent className="grid gap-4 sm:grid-cols-3">
             <FormField
               control={form.control}
               name="name"
               render={({ field }) => (
-                <FormItem>
+                <FormItem className="sm:col-span-2">
                   <FormLabel>Name</FormLabel>
                   <FormControl>
                     <Input {...field} />
diff --git a/apps/dashboard/src/components/forms/status-page/form-configuration.tsx b/apps/dashboard/src/components/forms/status-page/form-configuration.tsx
index 9697a9fc..8bc361b5 100644
--- a/apps/dashboard/src/components/forms/status-page/form-configuration.tsx
+++ b/apps/dashboard/src/components/forms/status-page/form-configuration.tsx
@@ -157,7 +157,7 @@ export function FormConfiguration({
             <FormCardSeparator />
             <FormCardContent
               className={cn(
-                "grid gap-4 sm:grid-cols-2",
+                "grid gap-4 sm:grid-cols-3",
                 !hasMonitorComponents && "pointer-events-none opacity-50",
               )}
             >
@@ -259,7 +259,7 @@ export function FormConfiguration({
               </Note>
             </FormCardContent>
             <FormCardSeparator />
-            <FormCardContent className="grid gap-4 sm:grid-cols-2">
+            <FormCardContent className="grid gap-4 sm:grid-cols-3">
               <FormField
                 control={form.control}
                 name="configuration.uptime"
@@ -341,7 +341,7 @@ export function FormConfiguration({
                 </ul>
               </Note>
             </FormCardContent>
-            <FormCardFooter>
+            <FormCardFooter className="flex-wrap">
               <FormCardFooterInfo>
                 Learn more about{" "}
                 <Link
diff --git a/apps/dashboard/src/components/forms/status-page/form-custom-domain.tsx b/apps/dashboard/src/components/forms/status-page/form-custom-domain.tsx
index d3fc9e24..d1f47b6a 100644
--- a/apps/dashboard/src/components/forms/status-page/form-custom-domain.tsx
+++ b/apps/dashboard/src/components/forms/status-page/form-custom-domain.tsx
@@ -102,12 +102,12 @@ export function FormCustomDomain({
               Use your own domain for your status page.
             </FormCardDescription>
           </FormCardHeader>
-          <FormCardContent>
+          <FormCardContent className="grid gap-4 sm:grid-cols-3">
             <FormField
               control={form.control}
               name="domain"
               render={({ field }) => (
-                <FormItem>
+                <FormItem className="sm:col-span-2">
                   <Label>Domain</Label>
                   <InputGroup>
                     <InputGroupAddon align="inline-start">
diff --git a/apps/dashboard/src/components/forms/status-page/form-general.tsx b/apps/dashboard/src/components/forms/status-page/form-general.tsx
index bc60ceb8..d9b54c37 100644
--- a/apps/dashboard/src/components/forms/status-page/form-general.tsx
+++ b/apps/dashboard/src/components/forms/status-page/form-general.tsx
@@ -172,12 +172,12 @@ export function FormGeneral({
             </FormCardDescription>
           </FormCardHeader>
           <FormCardSeparator />
-          <FormCardContent className="grid gap-4">
+          <FormCardContent className="grid gap-4 sm:grid-cols-3">
             <FormField
               control={form.control}
               name="title"
               render={({ field }) => (
-                <FormItem>
+                <FormItem className="sm:col-span-2">
                   <FormLabel>Title</FormLabel>
                   <FormControl>
                     <Input placeholder="My Status Page" {...field} />
@@ -193,7 +193,7 @@ export function FormGeneral({
               control={form.control}
               name="slug"
               render={({ field }) => (
-                <FormItem>
+                <FormItem className="sm:col-span-2">
                   <FormLabel>Slug</FormLabel>
                   <InputGroup>
                     <FormControl>
@@ -215,7 +215,7 @@ export function FormGeneral({
               control={form.control}
               name="icon"
               render={() => (
-                <FormItem>
+                <FormItem className="sm:col-span-2">
                   <FormLabel>Icon</FormLabel>
                   <FormControl>
                     <div className="flex items-center space-x-2">
@@ -275,7 +275,7 @@ export function FormGeneral({
               control={form.control}
               name="description"
               render={({ field }) => (
-                <FormItem>
+                <FormItem className="col-span-full">
                   <FormLabel>Description</FormLabel>
                   <FormControl>
                     <Textarea {...field} />
diff --git a/apps/dashboard/src/components/forms/status-page/form-links.tsx b/apps/dashboard/src/components/forms/status-page/form-links.tsx
index b7ebd77a..6323c421 100644
--- a/apps/dashboard/src/components/forms/status-page/form-links.tsx
+++ b/apps/dashboard/src/components/forms/status-page/form-links.tsx
@@ -88,7 +88,7 @@ export function FormLinks({
               control={form.control}
               name="homepageUrl"
               render={({ field }) => (
-                <FormItem className="sm:col-span-full">
+                <FormItem className="sm:col-span-2">
                   <FormLabel>Homepage URL</FormLabel>
                   <FormControl>
                     <Input placeholder="https://acme.com" {...field} />
@@ -104,7 +104,7 @@ export function FormLinks({
               control={form.control}
               name="contactUrl"
               render={({ field }) => (
-                <FormItem className="sm:col-span-full">
+                <FormItem className="sm:col-span-2">
                   <FormLabel>Contact URL</FormLabel>
                   <FormControl>
                     <Input placeholder="https://acme.com/contact" {...field} />
diff --git a/apps/dashboard/src/components/forms/status-page/form-locale.tsx b/apps/dashboard/src/components/forms/status-page/form-locale.tsx
index 86a3c414..9be136e9 100644
--- a/apps/dashboard/src/components/forms/status-page/form-locale.tsx
+++ b/apps/dashboard/src/components/forms/status-page/form-locale.tsx
@@ -146,12 +146,12 @@ export function FormLocale({
             </FormCardDescription>
           </FormCardHeader>
           <FormCardSeparator />
-          <FormCardContent className="grid gap-4">
+          <FormCardContent className="grid gap-4 sm:grid-cols-3">
             <FormField
               control={form.control}
               name="defaultLocale"
               render={({ field }) => (
-                <FormItem>
+                <FormItem className="sm:col-span-2">
                   <FormLabel>Default Locale</FormLabel>
                   <Select
                     onValueChange={field.onChange}
@@ -177,7 +177,7 @@ export function FormLocale({
                 </FormItem>
               )}
             />
-            <div className="space-y-3">
+            <div className="col-span-full space-y-3">
               <div className="flex items-center space-x-2">
                 <Checkbox
                   id="multi-locale"
diff --git a/apps/dashboard/src/components/forms/status-page/form-page-access.tsx b/apps/dashboard/src/components/forms/status-page/form-page-access.tsx
index 7b21e346..c723f3b8 100644
--- a/apps/dashboard/src/components/forms/status-page/form-page-access.tsx
+++ b/apps/dashboard/src/components/forms/status-page/form-page-access.tsx
@@ -211,14 +211,14 @@ export function FormPageAccess({
             <FormCardSeparator />
           ) : null}
           {watchAccessType === "password" ? (
-            <FormCardContent className="grid gap-4">
+            <FormCardContent className="grid gap-4 sm:grid-cols-3">
               {locked ? <FormCardContentUpgrade /> : null}
               <FormField
                 control={form.control}
                 name="password"
                 disabled={locked}
                 render={({ field }) => (
-                  <FormItem>
+                  <FormItem className="sm:col-span-2">
                     <FormLabel>Password</FormLabel>
                     <FormControl>
                       <Input {...field} />
@@ -234,14 +234,14 @@ export function FormPageAccess({
             </FormCardContent>
           ) : null}
           {watchAccessType === "email-domain" ? (
-            <FormCardContent className="grid gap-4">
+            <FormCardContent className="grid gap-4 sm:grid-cols-3">
               {locked ? <FormCardContentUpgrade /> : null}
               <FormField
                 control={form.control}
                 name="authEmailDomains"
                 disabled={locked}
                 render={({ field }) => (
-                  <FormItem>
+                  <FormItem className="sm:col-span-2">
                     <FormLabel>Email Domains</FormLabel>
                     <FormControl>
                       <Input {...field} />
@@ -258,14 +258,14 @@ export function FormPageAccess({
             </FormCardContent>
           ) : null}
           {watchAccessType === "ip-restriction" ? (
-            <FormCardContent className="grid gap-4">
+            <FormCardContent className="grid gap-4 sm:grid-cols-3">
               {locked ? <FormCardContentUpgrade /> : null}
               <FormField
                 control={form.control}
                 name="allowedIpRanges"
                 disabled={locked}
                 render={({ field }) => (
-                  <FormItem>
+                  <FormItem className="sm:col-span-2">
                     <FormLabel>Allowed IP Ranges</FormLabel>
                     <FormControl>
                       <Input
diff --git a/apps/dashboard/src/components/status-reports/status-report-composer.tsx b/apps/dashboard/src/components/status-reports/status-report-composer.tsx
index 25229bde..dd7183cc 100644
--- a/apps/dashboard/src/components/status-reports/status-report-composer.tsx
+++ b/apps/dashboard/src/components/status-reports/status-report-composer.tsx
@@ -173,14 +173,14 @@ export function StatusReportComposer({
         <ComposerPreview value={message} />
         {pageComponents.length ? (
           <ComposerSection>
-            <div className="flex items-center justify-between gap-2">
+            <div className="flex flex-wrap items-center justify-between gap-x-2 gap-y-1">
               <span className="text-muted-foreground text-xs font-light tracking-wide uppercase">
                 Affected components
               </span>
               <Button
                 variant="ghost"
                 size="sm"
-                className="text-muted-foreground -my-1 h-7 font-normal"
+                className="text-muted-foreground -my-1 ml-auto h-7 font-normal"
                 disabled={components.length === 0}
                 onClick={() =>
                   setOverrides(
@@ -195,14 +195,21 @@ export function StatusReportComposer({
               {components.map((component) => {
                 const override = overrides.get(component.id);
                 return (
-                  <ComponentListItem key={component.id}>
-                    <ComponentListName group={groupOf.get(component.id)}>
+                  <ComponentListItem
+                    key={component.id}
+                    // phones: name + current impact on one row, the picker below
+                    className="flex-wrap sm:flex-nowrap"
+                  >
+                    <ComponentListName
+                      group={groupOf.get(component.id)}
+                      className="min-w-0 flex-1 sm:flex-initial"
+                    >
                       {component.name}
                     </ComponentListName>
                     <ComponentImpact
                       impact={currentImpacts.get(component.id)}
                     />
-                    <ComponentListActions>
+                    <ComponentListActions className="basis-full sm:basis-auto">
                       <Select
                         value={override ?? ""}
                         onValueChange={(value) => {
@@ -217,8 +224,9 @@ export function StatusReportComposer({
                       >
                         <ComponentListSelectTrigger
                           aria-label={`${component.name} impact`}
+                          // phones: -ml-3 puts the text on the name's edge; from sm a
                           // fixed width keeps chevrons and close buttons in a column
-                          className="text-foreground w-52 font-mono"
+                          className="text-foreground -ml-3 w-auto min-w-0 flex-1 font-mono sm:ml-0 sm:w-52 sm:flex-none"
                         >
                           <SelectValue
                             placeholder={
@@ -265,6 +273,7 @@ export function StatusReportComposer({
             <ComponentListAdd
               components={addable}
               groups={groups}
+              className="-ml-3 sm:ml-0"
               onAdd={(id) => {
                 setIds([...componentIds, id]);
                 // a component joins the report with a concrete impact
@@ -278,7 +287,8 @@ export function StatusReportComposer({
           </ComposerSection>
         ) : null}
         <ComposerFooter>
-          <div className="flex flex-wrap items-center gap-2">
+          {/* phones: label column + field column so both fields share a left edge */}
+          <div className="grid grid-cols-[auto_minmax(0,1fr)] items-center gap-2 sm:flex sm:flex-wrap">
             <span>Status</span>
             <Select
               value={status}
@@ -312,10 +322,10 @@ export function StatusReportComposer({
               value={date ?? now}
               max={new Date()}
               onChange={setDate}
-              className="bg-background text-foreground h-8 font-mono"
+              className="bg-background text-foreground h-8 w-fit font-mono"
             />
           </div>
-          <div className="ml-auto flex items-center gap-3">
+          <div className="ml-auto flex w-full flex-wrap items-center justify-between gap-3 sm:w-auto sm:justify-start">
             <div className="flex items-center gap-2">
               <Checkbox
                 id="notify-subscribers"
@@ -325,7 +335,7 @@ export function StatusReportComposer({
               />
               <Label
                 htmlFor="notify-subscribers"
-                className="text-xs font-normal"
+                className="text-xs font-normal whitespace-nowrap"
                 title={
                   canNotify
                     ? undefined
@@ -337,6 +347,7 @@ export function StatusReportComposer({
             </div>
             <Button
               size="sm"
+              className="ml-auto"
               disabled={disabled}
               onClick={() => submit().catch(console.error)}
             >