From 9dfaa5bf5743c1182a9024208d6564210004ac09 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andreas=20M=C3=BCller?= <mail@devmount.de>
Date: Wed, 13 May 2026 07:48:49 +0200
Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=94=A8=20Fix=20code=20examples=20for?=
 =?UTF-8?q?=20SyncCard=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/SyncCard.stories.ts | 103 ++++++++++++++++-------------
 1 file changed, 56 insertions(+), 47 deletions(-)

diff --git a/src/components/SyncCard.stories.ts b/src/components/SyncCard.stories.ts
index 25e42e1..2c0ed3c 100644
--- a/src/components/SyncCard.stories.ts
+++ b/src/components/SyncCard.stories.ts
@@ -10,25 +10,7 @@ const meta: Meta<typeof SyncCard> = {
   // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ['autodocs'],
   args: {
-    title: 'Sync Card Demo',
-  },
-  parameters: {
-    docs: {
-      /*
-      source: {
-        format: true,
-        code: `
-        <sync-card title="Sync Card Demo" v-model="sync-card-model">
-          <template v-slot:icon>
-            <span>
-              <img :src="icon" alt="icon alt text"/>
-            </span>
-          </template>
-        </sync-card>
-      `
-      },
-       */
-    },
+    title: 'Title',
   },
   render: (args) => ({
     components: { SyncCard },
@@ -44,69 +26,96 @@ const meta: Meta<typeof SyncCard> = {
 
       return { args, model };
     },
-    template: `
-      <sync-card v-bind="args" v-model="model">
-        <template v-slot:icon>
-          <span class="icon-calendar">
-            <img src="${CalendarIcon}" alt="Calendar Icon"/>
-          </span>
-        </template>
-      </sync-card>`,
+    template: `<sync-card v-bind="args" v-model="model" />`,
   }),
 };
 
 export default meta;
 type Story = StoryObj<typeof meta>;
-export const CalendarSync: Story = {
+
+export const Standard: Story = {
   args: {
     modelValue: [
       {
         key: 0,
-        label: 'My calendar',
+        label: 'Option 1',
         checked: false,
       },
       {
         key: 1,
-        label: 'Test Calendar',
-        checked: false,
-      },
-      {
-        key: 2,
-        label: 'Where all the spam events go',
+        label: 'Option 2',
         checked: true,
       },
       {
-        key: 3,
-        label: 'Work PTO',
-        checked: false,
-      },
-      {
-        key: 4,
-        label: 'That calendar you never use but its full of holidays',
+        key: 2,
+        label: 'Option 3',
         checked: false,
       },
     ],
   },
+  parameters: {
+    docs: {
+      source: {
+        code: '<sync-card\n  title="Title"\n  v-model="[\n    { key: 0, label: \'Option 1\', checked: false },\n    { key: 1, label: \'Option 2\', checked: true },\n    { key: 2, label: \'Option 3\', checked: false },\n  ]"\n/>',
+      },
+    },
+  },
 };
 
-export const FileSync: Story = {
+export const Icon: Story = {
   args: {
+    title: 'Select calendars to sync',
     modelValue: [
       {
         key: 0,
-        label: 'acorn.png',
-        checked: false,
+        label: 'My calendar',
+        checked: true,
       },
       {
         key: 1,
-        label: 'squirrel shopping list.txt',
+        label: 'Test Calendar',
         checked: false,
       },
       {
         key: 2,
-        label: 'chill beats to hibernate to.zip',
+        label: 'Where all the spam events go',
         checked: false,
       },
+      {
+        key: 3,
+        label: 'Work PTO',
+        checked: true,
+      },
     ],
   },
+  render: (args) => ({
+    components: { SyncCard },
+    setup() {
+      const model = ref(args.modelValue);
+
+      watch(
+        () => args.modelValue,
+        (val) => {
+          model.value = val;
+        }
+      );
+
+      return { args, model };
+    },
+    template: `
+      <sync-card v-bind="args" v-model="model">
+        <template v-slot:icon>
+          <span class="icon-calendar">
+            <img src="${CalendarIcon}" alt="Calendar Icon"/>
+          </span>
+        </template>
+      </sync-card>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: '<sync-card\n  title="Title"\n  v-model="[\n    { key: 0, label: \'My calendar\', checked: true },\n    { key: 1, label: \'Test Calendar\', checked: false },\n    { key: 2, label: \'Where all the spam events go\', checked: false },\n    { key: 3, label: \'Work PTO\', checked: true },\n  ]"\n>\n  <template v-slot:icon>\n    <img src="/assets/svg/icons/calendar.svg" alt="Calendar Icon"/>\n  </template>\n</sync-card>',
+      },
+    },
+  },
 };

From fb979b9c1e6e24dabb7c26c7548a4a9e3b1b13df Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andreas=20M=C3=BCller?= <mail@devmount.de>
Date: Wed, 13 May 2026 07:49:08 +0200
Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=94=A8=20Fix=20list=20items=20overflo?=
 =?UTF-8?q?w=20parent?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/SyncCard.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/SyncCard.vue b/src/components/SyncCard.vue
index b9b4fff..2f82a09 100644
--- a/src/components/SyncCard.vue
+++ b/src/components/SyncCard.vue
@@ -114,6 +114,7 @@ withDefaults(defineProps<Props>(), {
   background-color: var(--colour-neutral-base);
   padding: 0.375rem 0.75rem;
   font-size: var(--txt-input);
+  box-sizing: border-box;
 
   &:nth-child(even) {
     background-color: var(--colour-neutral-lower);