@classic-homes/theme-svelte 1.11.0 → 1.12.0

package/dist/lib/components/DataTable.svelte

@@ -479,7 +479,7 @@
 
 {#if enablePagination && !loading && table.rows.length > 0}
   <!-- Pagination controls -->
-  <div class="flex items-center justify-between border-t px-4 py-3">
+  <div class="flex flex-wrap items-center justify-between gap-2 border-t px-4 py-3">
     <div class="text-sm text-muted-foreground">
       {#if enableRowSelection && table.selectedCount > 0}
         {table.selectedCount} of {table.totalRows} row(s) selected
@@ -490,7 +490,7 @@
     <div class="flex items-center gap-2">
       <button
         type="button"
-        class="rounded-md border px-3 py-1 text-sm disabled:opacity-50"
+        class="min-h-11 rounded-md border px-3 py-1 text-sm disabled:opacity-50 sm:min-h-0"
         disabled={!table.canPreviousPage}
         onclick={() => table.previousPage()}
       >
@@ -501,7 +501,7 @@
       </span>
       <button
         type="button"
-        class="rounded-md border px-3 py-1 text-sm disabled:opacity-50"
+        class="min-h-11 rounded-md border px-3 py-1 text-sm disabled:opacity-50 sm:min-h-0"
         disabled={!table.canNextPage}
         onclick={() => table.nextPage()}
       >

package/dist/lib/components/RadioGroup.svelte

@@ -91,7 +91,10 @@
   onValueChange={handleValueChange}
   class={cn(
     'grid gap-2',
-    orientation === 'horizontal' ? 'grid-flow-col auto-cols-max' : 'grid-flow-row',
+    // Horizontal stacks below sm: a non-wrapping column flow overflows phones.
+    orientation === 'horizontal'
+      ? 'grid-flow-row sm:grid-flow-col sm:auto-cols-max'
+      : 'grid-flow-row',
     className
   )}
   aria-labelledby={label ? labelId : undefined}

package/dist/lib/components/notifications/NotificationDialog.svelte

@@ -82,6 +82,9 @@
       onClose?.();
     }
   }
+
+  // Full-width 44px touch targets on phones; stock size from sm up.
+  const footerButtonClass = 'h-11 w-full sm:h-10 sm:w-auto';
 </script>
 
 <Dialog {open} onOpenChange={handleOpenChange} size="lg">
@@ -172,27 +175,27 @@
 
   {#snippet footer()}
     {#if notification}
-      <div class="flex items-center justify-between w-full">
-        <div>
-          {#if onDelete}
-            <Button variant="destructive" onclick={handleDelete}>
-              {#snippet children()}
-                <Icon name="trash" size={16} />
-                Delete
-              {/snippet}
-            </Button>
-          {/if}
-        </div>
-        <div class="flex items-center gap-2">
+      <!-- Phone: full-width stacked buttons, primary on top, Delete at the bottom.
+           sm+: one row, Delete left, the rest pushed right. -->
+      <div class="flex w-full flex-col-reverse gap-2 sm:flex-row sm:items-center">
+        {#if onDelete}
+          <Button variant="destructive" class={footerButtonClass} onclick={handleDelete}>
+            {#snippet children()}
+              <Icon name="trash" size={16} />
+              Delete
+            {/snippet}
+          </Button>
+        {/if}
+        <div class="flex flex-col-reverse gap-2 sm:ml-auto sm:flex-row sm:items-center">
           {#if notification.read && onMarkUnread}
-            <Button variant="outline" onclick={handleMarkUnread}>
+            <Button class={footerButtonClass} variant="outline" onclick={handleMarkUnread}>
               {#snippet children()}
                 <Icon name="mail" size={16} />
                 Mark Unread
               {/snippet}
             </Button>
           {:else if !notification.read && onMarkRead}
-            <Button variant="outline" onclick={handleMarkRead}>
+            <Button class={footerButtonClass} variant="outline" onclick={handleMarkRead}>
               {#snippet children()}
                 <Icon name="check" size={16} />
                 Mark Read
@@ -200,7 +203,7 @@
             </Button>
           {/if}
           {#if notification.actionUrl}
-            <Button href={notification.actionUrl}>
+            <Button class={footerButtonClass} href={notification.actionUrl}>
               {#snippet children()}
                 {notification.actionLabel || 'View Details'}
               {/snippet}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@classic-homes/theme-svelte",
-  "version": "1.11.0",
+  "version": "1.12.0",
   "description": "Svelte components for the Classic theme system",
   "type": "module",
   "svelte": "./dist/lib/index.js",