From e46912d19765f9ea668ae1e0ce1cdff28253ddc5 Mon Sep 17 00:00:00 2001
From: kayjaydee <killian.dalcin@gmail.com>
Date: Tue, 21 Apr 2026 15:20:14 +0200
Subject: [PATCH] fix(05-02): alert alignment via #title slot, dark-only code
 theme, simplify ProseImg

---
 app/assets/css/main.css             | 10 +---------
 app/components/content/Alert.vue    |  2 +-
 app/components/content/ProseImg.vue |  2 +-
 3 files changed, 3 insertions(+), 11 deletions(-)

diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index 6ce177d..0702286 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -2,17 +2,9 @@
 @import "@nuxt/ui";
 @plugin "@tailwindcss/typography";
 
-/* Shiki dual-theme switching via .dark class (color mode cookie) */
+/* Force Shiki dark theme in all color modes — code blocks always dark */
 .shiki,
 .shiki span {
-  color: var(--shiki-light) !important;
-  background-color: var(--shiki-light-bg) !important;
-  font-style: var(--shiki-light-font-style) !important;
-  font-weight: var(--shiki-light-font-weight) !important;
-  text-decoration: var(--shiki-light-text-decoration) !important;
-}
-.dark .shiki,
-.dark .shiki span {
   color: var(--shiki-dark) !important;
   background-color: var(--shiki-dark-bg) !important;
   font-style: var(--shiki-dark-font-style) !important;
diff --git a/app/components/content/Alert.vue b/app/components/content/Alert.vue
index 9f19c43..6d8c4b8 100644
--- a/app/components/content/Alert.vue
+++ b/app/components/content/Alert.vue
@@ -27,7 +27,7 @@ const colorMap = {
     variant="soft"
     class="my-4"
   >
-    <template #description>
+    <template #title>
       <slot />
     </template>
   </UAlert>
diff --git a/app/components/content/ProseImg.vue b/app/components/content/ProseImg.vue
index c71b862..15feef8 100644
--- a/app/components/content/ProseImg.vue
+++ b/app/components/content/ProseImg.vue
@@ -18,7 +18,7 @@ const props = withDefaults(defineProps<Props>(), {
     :title="props.title"
     :width="props.width"
     :height="props.height"
+    format="webp"
     class="rounded-lg w-full"
-    sizes="sm:600px md:800px lg:1000px"
   />
 </template>