chore: visual improvements

Author: atinux

src/app/src/components/content/ContentCardReview.vue

@@ -110,7 +110,7 @@ async function initializeEditor() {
           v-else
           class="relative w-full h-full"
         >
-          <WarningTooltip v-if="isAutomaticFormattingDetected" />
+          <AlertMDCFormatting v-if="isAutomaticFormattingDetected" />
           <div
             ref="diffEditorRef"
             class="w-full h-full"

src/app/src/components/content/ContentEditorCode.vue

@@ -127,7 +127,7 @@ async function setContent(document: DatabasePageItem) {
 
 <template>
   <div class="relative h-full">
-    <WarningTooltip v-if="isAutomaticFormattingDetected" />
+    <AlertMDCFormatting v-if="isAutomaticFormattingDetected" />
     <div
       ref="editorRef"
       class="h-full -ml-3"

src/app/src/components/shared/AlertMDCFormatting.vue

@@ -0,0 +1,8 @@
+<template>
+  <UAlert
+    title="Formatting applied to align with MDC syntax standard."
+    color="info"
+    variant="soft"
+    :ui="{ title: 'text-xs', root: 'rounded-none py-2 border-b border-default' }"
+  />
+</template>

src/app/src/components/shared/WarningTooltip.vue

@@ -69,7 +69,7 @@ const items = computed<BreadcrumbItem[]>(() => {
 </script>
 
 <template>
-  <div class="flex items-center gap-1">
+  <div class="flex items-center gap-1 overflow-hidden">
     <UBreadcrumb
       :items="items"
       color="neutral"

src/app/src/components/shared/item/ItemBreadcrumb.vue

@@ -242,7 +242,7 @@ async function onSubmit() {
         <UPageCard
           reverse
           :class="{ 'animate-pulse': isLoading }"
-          class="hover:bg-white relative w-full min-w-0 overflow-hidden"
+          class="hover:bg-elevated/20 relative w-full min-w-0 overflow-hidden"
           :ui="{ container: 'overflow-hidden' }"
         >
           <template #body>

src/app/src/components/shared/item/ItemCardForm.vue

@@ -38,9 +38,9 @@ const statusConfig = {
 </script>
 
 <template>
-  <div class="flex flex-col h-full">
+  <div class="flex flex-col h-full text-default">
     <div class="flex items-center gap-1 px-4 py-2 border-b-[0.5px] border-default bg-muted/70">
-      <h2 class="text-xs font-semibold">
+      <h2 class="text-xs font-semibold text-muted">
         Review changes
       </h2>
       <UBadge