From 4b24bc1c6dc0e492890be1dfc30f9ad6940b5fbb Mon Sep 17 00:00:00 2001
From: diondiondion <mail@diondiondion.com>
Date: Mon, 8 Jun 2026 11:08:00 +0200
Subject: [PATCH] [Glitch] Fix alignment of icon and text in Callout component

Port 87024b9e1cf7f0945eae457501899216d79c9073 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 .../components/callout/callout.stories.tsx    | 19 ++++++++++++++-----
 .../components/callout/styles.module.css      |  5 +++--
 .../glitch/styles/mastodon/admin.scss         |  5 +++--
 3 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/app/javascript/flavours/glitch/components/callout/callout.stories.tsx b/app/javascript/flavours/glitch/components/callout/callout.stories.tsx
index f9bba1ec14..bb973ab71f 100644
--- a/app/javascript/flavours/glitch/components/callout/callout.stories.tsx
+++ b/app/javascript/flavours/glitch/components/callout/callout.stories.tsx
@@ -34,6 +34,15 @@ export const Default: Story = {
   },
 };
 
+export const NoTitle: Story = {
+  args: {
+    title: '',
+    primaryLabel: '',
+    secondaryLabel: '',
+    onClose: undefined,
+  },
+};
+
 export const NoIcon: Story = {
   args: {
     icon: false,
@@ -56,11 +65,11 @@ export const OnlyText: Story = {
   },
 };
 
-// export const Subtle: Story = {
-//   args: {
-//     variant: 'subtle',
-//   },
-// };
+export const Subtle: Story = {
+  args: {
+    variant: 'subtle',
+  },
+};
 
 export const Feature: Story = {
   args: {
diff --git a/app/javascript/flavours/glitch/components/callout/styles.module.css b/app/javascript/flavours/glitch/components/callout/styles.module.css
index fc05e57ab3..dd2c753525 100644
--- a/app/javascript/flavours/glitch/components/callout/styles.module.css
+++ b/app/javascript/flavours/glitch/components/callout/styles.module.css
@@ -7,6 +7,7 @@
   color: var(--color-text-primary);
   border-radius: 12px;
   font-size: 15px;
+  line-height: 1.3333;
 }
 
 .icon {
@@ -14,7 +15,7 @@
   border-radius: 9999px;
   width: 1rem;
   height: 1rem;
-  margin-top: -2px;
+  margin-block: -2px;
 }
 
 .content,
@@ -46,7 +47,7 @@
 
   h3 {
     font-weight: 500;
-    margin-bottom: 5px;
+    margin-bottom: 3px;
   }
 }
 
diff --git a/app/javascript/flavours/glitch/styles/mastodon/admin.scss b/app/javascript/flavours/glitch/styles/mastodon/admin.scss
index 5950bc32cb..a5c2f3183f 100644
--- a/app/javascript/flavours/glitch/styles/mastodon/admin.scss
+++ b/app/javascript/flavours/glitch/styles/mastodon/admin.scss
@@ -456,6 +456,7 @@ $content-width: 840px;
     color: var(--color-text-primary);
     border-radius: 12px;
     font-size: 15px;
+    line-height: 1.3333;
     margin-bottom: 30px;
 
     .icon {
@@ -463,7 +464,7 @@ $content-width: 840px;
       border-radius: 9999px;
       width: 1rem;
       height: 1rem;
-      margin-top: -2px;
+      margin-block: -2px;
       background-color: var(--color-bg-brand-soft);
     }
 
@@ -501,7 +502,7 @@ $content-width: 840px;
 
     .title {
       font-weight: 600;
-      margin-bottom: 8px;
+      margin-bottom: 6px;
       font-size: inherit;
       line-height: inherit;
     }