From 00b6783ae0dde39e8e3e5bbb0ada4c6a80cede61 Mon Sep 17 00:00:00 2001
From: Jesse Wierzbinski <contact@cpluspatch.com>
Date: Wed, 18 Jun 2025 19:55:56 +0200
Subject: [PATCH] refactor: :lipstick: Update card and action button padding

---
 components/form/switch.vue           | 2 +-
 components/notes/action-button.vue   | 4 ++--
 components/notes/actions.vue         | 2 +-
 components/notes/header.vue          | 2 +-
 components/notes/note.vue            | 2 +-
 components/preferences/developer.vue | 2 +-
 components/preferences/stats.vue     | 2 +-
 components/ui/card/Card.vue          | 2 +-
 8 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/components/form/switch.vue b/components/form/switch.vue
index 20ab220..cc84b2b 100644
--- a/components/form/switch.vue
+++ b/components/form/switch.vue
@@ -1,5 +1,5 @@
 <template>
-    <Card class="p-4">
+    <Card>
         <FormItem class="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-2">
             <CardHeader class="flex flex-col gap-1.5 p-0">
                 <FormLabel class="font-semibold tracking-tight" :as="CardTitle">
diff --git a/components/notes/action-button.vue b/components/notes/action-button.vue
index 08bd1e3..93bbd87 100644
--- a/components/notes/action-button.vue
+++ b/components/notes/action-button.vue
@@ -1,6 +1,6 @@
 <template>
-    <Button variant="ghost" class="max-w-14 w-full">
-        <component :is="icon" class="size-4.5" />
+    <Button variant="ghost" class="max-w-14 w-full" size="sm">
+        <component :is="icon" class="size-4" />
         <slot />
     </Button>
 </template>
diff --git a/components/notes/actions.vue b/components/notes/actions.vue
index b888d31..7e671c4 100644
--- a/components/notes/actions.vue
+++ b/components/notes/actions.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="flex flex-row w-full gap-x-4 items-stretch justify-start">
+    <div class="flex flex-row w-full max-w-sm items-stretch justify-between">
         <ActionButton :icon="Reply" @click="emit('reply')" :title="m.drab_tense_turtle_comfort()" :disabled="!identity">
             {{ numberFormat(replyCount) }}
         </ActionButton>
diff --git a/components/notes/header.vue b/components/notes/header.vue
index 6aebc48..94f269b 100644
--- a/components/notes/header.vue
+++ b/components/notes/header.vue
@@ -33,7 +33,7 @@
                 <span class="text-muted-foreground ml-auto tracking-normal" :title="fullTime">{{ timeAgo }}</span>
             </span>
         </div>
-        <div class="flex flex-col gap-1 justify-center items-end" v-if="!smallLayout">
+        <div class="flex flex-col gap-1 h-full justify-center items-end" v-if="!smallLayout">
             <NuxtLink :href="noteUrlAsPath" class="text-xs text-muted-foreground"
                 :title="visibilities[visibility].text">
                 <component :is="visibilities[visibility].icon" class="size-4" />
diff --git a/components/notes/note.vue b/components/notes/note.vue
index e831f7c..a87466c 100644
--- a/components/notes/note.vue
+++ b/components/notes/note.vue
@@ -1,5 +1,5 @@
 <template>
-    <Card as="article" class="relative gap-4 items-stretch">
+    <Card as="article" class="relative gap-3 items-stretch">
         <CardHeader as="header" class="space-y-2">
             <ReblogHeader
                 v-if="note.reblog"
diff --git a/components/preferences/developer.vue b/components/preferences/developer.vue
index 5f49f72..a103867 100644
--- a/components/preferences/developer.vue
+++ b/components/preferences/developer.vue
@@ -1,5 +1,5 @@
 <template>
-    <Card class="grid gap-3 text-sm p-4">
+    <Card class="grid gap-3 text-sm">
         <dl class="grid gap-3">
             <div v-for="[key, value] of data" :key="key" class="flex flex-row items-baseline justify-between gap-4 truncate">
                 <dt class="text-muted-foreground">
diff --git a/components/preferences/stats.vue b/components/preferences/stats.vue
index 4d5b03d..95d6f0f 100644
--- a/components/preferences/stats.vue
+++ b/components/preferences/stats.vue
@@ -1,5 +1,5 @@
 <template>
-    <Card class="grid gap-3 text-sm max-w-sm p-4">
+    <Card class="grid gap-3 text-sm max-w-sm">
         <dl class="grid gap-3">
             <div v-for="[key, value] of data" :key="key" class="flex flex-row items-baseline justify-between gap-4 truncate">
                 <dt class="text-muted-foreground">
diff --git a/components/ui/card/Card.vue b/components/ui/card/Card.vue
index 1b01ffd..2474873 100644
--- a/components/ui/card/Card.vue
+++ b/components/ui/card/Card.vue
@@ -9,7 +9,7 @@ const props = defineProps<{
 
 <template>
     <div data-slot="card" :class="cn(
-        'bg-card text-card-foreground flex flex-col gap-6 rounded-md border p-6 shadow-sm',
+        'bg-card text-card-foreground flex flex-col gap-6 rounded-md border p-4 shadow-sm',
         props.class,
     )
         ">