Shift shadow and rounded scales to preserve v2 visual sizes

Author: n-lark

frontend/src/components/CodeSnippet.vue

@@ -1,5 +1,5 @@
 <template>
-    <pre class="overflow-auto text-xs font-light p-4 border rounded bg-gray-800 text-gray-200"><slot /></pre>
+    <pre class="overflow-auto text-xs font-light p-4 border rounded-sm bg-gray-800 text-gray-200"><slot /></pre>
 </template>
 
 <script>

frontend/src/components/DropdownMenu.vue

@@ -20,7 +20,7 @@
                 <MenuItems
                     v-if="open"
                     ref="menu-items"
-                    class="z-1000 fixed bg-white rounded overflow-hidden shadow-lg ring-1 ring-black/10 focus:outline-hidden"
+                    class="z-1000 fixed bg-white rounded-sm overflow-hidden shadow-lg ring-1 ring-black/10 focus:outline-hidden"
                     :style="teleportedStyle"
                 >
                     <div class="apx-1 apy-1">
@@ -38,7 +38,7 @@
                             <template v-else>
                                 <a :class="[active ? 'bg-gray-200' : '', item.selected? 'bg-gray-100':'', 'block px-4 py-2 text-sm text-gray-700',...(item.class||[])]" :data-action="`menu-${item.name.toLowerCase()}`" @click="item.action">
                                     <component :is="item.icon" v-if="item.icon" class="w-4 inline" />
-                                    <img v-if="item.imgUrl" :src="item.imgUrl" class="h-4 v-4 inline rounded mr-1">
+                                    <img v-if="item.imgUrl" :src="item.imgUrl" class="h-4 v-4 inline rounded-sm mr-1">
                                     {{ item.name }}
                                 </a>
                             </template>

frontend/src/components/dialogs/AssetCompareDialog.vue

@@ -18,7 +18,7 @@
                 <button
                     v-if="hasCompared"
                     v-ff-tooltip:left="'Simple view hides changes to node positions'"
-                    class="text-xs px-2 py-1 rounded border font-medium shrink-0"
+                    class="text-xs px-2 py-1 rounded-sm border font-medium shrink-0"
                     :class="hidePositionChanges
                         ? 'bg-blue-50 border-blue-300 text-blue-700'
                         : 'border-gray-300 text-gray-600 hover:bg-gray-50'"
@@ -36,19 +36,19 @@
             <!-- Navigation bar — shown after comparison -->
             <div v-if="hasCompared && !loading" class="flex items-center gap-2 px-3 py-1.5 border-b border-gray-200 bg-white shrink-0">
                 <div v-if="currentGroup" class="flex-1 flex items-center gap-2 min-w-0">
-                    <span class="text-xs font-semibold px-1.5 py-0.5 rounded capitalize shrink-0" :class="diffTypeBadgeClass(currentGroup.diffType)">{{ currentGroup.diffType }}</span>
+                    <span class="text-xs font-semibold px-1.5 py-0.5 rounded-sm capitalize shrink-0" :class="diffTypeBadgeClass(currentGroup.diffType)">{{ currentGroup.diffType }}</span>
                     <span class="font-semibold text-sm text-gray-800 truncate">{{ currentGroup.name }}</span>
-                    <span class="text-xs font-semibold text-gray-700 bg-gray-200 px-1.5 py-0.5 rounded shrink-0">{{ currentGroup.type }}</span>
-                    <span v-if="currentGroupCategoryLabel" class="text-xs font-semibold text-purple-600 bg-purple-50 px-1.5 py-0.5 rounded shrink-0">{{ currentGroupCategoryLabel }}</span>
-                    <span v-if="currentGroupTabMove" class="text-xs text-amber-600 bg-amber-50 px-1.5 py-0.5 rounded shrink-0">
+                    <span class="text-xs font-semibold text-gray-700 bg-gray-200 px-1.5 py-0.5 rounded-sm shrink-0">{{ currentGroup.type }}</span>
+                    <span v-if="currentGroupCategoryLabel" class="text-xs font-semibold text-purple-600 bg-purple-50 px-1.5 py-0.5 rounded-sm shrink-0">{{ currentGroupCategoryLabel }}</span>
+                    <span v-if="currentGroupTabMove" class="text-xs text-amber-600 bg-amber-50 px-1.5 py-0.5 rounded-sm shrink-0">
                         {{ currentGroupTabMove.from }} → {{ currentGroupTabMove.to }}
                     </span>
                 </div>
                 <div v-else class="flex-1 text-sm text-gray-400 text-center">No differences found</div>
                 <!-- Prev / counter / Next grouped so the two buttons are adjacent -->
                 <div class="flex items-center gap-1 shrink-0">
                     <button
-                        class="px-2 py-0.5 text-sm rounded border border-gray-200 text-gray-500 hover:bg-gray-50 disabled:opacity-30 disabled:cursor-not-allowed"
+                        class="px-2 py-0.5 text-sm rounded-sm border border-gray-200 text-gray-500 hover:bg-gray-50 disabled:opacity-30 disabled:cursor-not-allowed"
                         :disabled="currentGroupIndex === 0"
                         title="Previous change (←)"
                         @click="navigate(-1)"
@@ -57,7 +57,7 @@
                     </button>
                     <span class="text-xs text-gray-400 px-1">{{ groupedChanges.length ? `${currentGroupIndex + 1} / ${groupedChanges.length}` : '0' }}</span>
                     <button
-                        class="px-2 py-0.5 text-sm rounded border border-gray-200 text-gray-500 hover:bg-gray-50 disabled:opacity-30 disabled:cursor-not-allowed"
+                        class="px-2 py-0.5 text-sm rounded-sm border border-gray-200 text-gray-500 hover:bg-gray-50 disabled:opacity-30 disabled:cursor-not-allowed"
                         :disabled="currentGroupIndex >= groupedChanges.length - 1"
                         title="Next change (→)"
                         @click="navigate(1)"

frontend/src/components/dialogs/SnapshotDiffChangePanel.vue

@@ -9,7 +9,7 @@
                     <span v-else-if="seg.type === 'sep'" class="text-gray-300">|</span>
                     <span
                         v-else
-                        class="px-1.5 py-0.5 rounded font-mono"
+                        class="px-1.5 py-0.5 rounded-sm font-mono"
                         :class="{
                             'bg-red-50 text-red-700 line-through': seg.kind === 'removed',
                             'bg-green-50 text-green-700': seg.kind === 'added',
@@ -42,20 +42,20 @@
                         <!-- Wrap toggle (shown when any line exceeds 50 chars) -->
                         <button
                             v-if="hasLongLines"
-                            class="text-gray-400 hover:text-gray-600 px-1 py-0.5 rounded hover:bg-gray-200"
+                            class="text-gray-400 hover:text-gray-600 px-1 py-0.5 rounded-sm hover:bg-gray-200"
                             title="Toggle word wrap"
                             @click.stop="wrapped = !wrapped"
                         >Wrap</button>
                         <!-- Prettify button (shown when value looks like JSON) -->
                         <button
                             v-if="canPrettify && !prettified"
-                            class="text-gray-400 hover:text-gray-600 px-1 py-0.5 rounded hover:bg-gray-200"
+                            class="text-gray-400 hover:text-gray-600 px-1 py-0.5 rounded-sm hover:bg-gray-200"
                             title="Pretty-print JSON and re-diff"
                             @click.stop="prettify"
                         >Prettify</button>
                         <button
                             v-if="prettified"
-                            class="text-blue-500 hover:text-blue-700 px-1 py-0.5 rounded hover:bg-blue-50"
+                            class="text-blue-500 hover:text-blue-700 px-1 py-0.5 rounded-sm hover:bg-blue-50"
                             title="Show raw values"
                             @click.stop="unprettify"
                         >Raw</button>

frontend/src/components/drawers/RightDrawer.vue

@@ -482,7 +482,7 @@ export default {
         position: relative; // Changed from initial to relative for resize bar positioning
         height: 100%;
         top: 0; // Reset top offset to prevent gap at top
-        box-shadow: none; // Remove shadow when pinned
+        box-shadow: none; // Remove shadow-sm when pinned
         flex-shrink: 0; // Prevent flex from shrinking the drawer below its set width
         min-width: unset; // Remove responsive min-width constraint
         max-width: none; // Remove responsive max-width constraint

frontend/src/components/expert/components/ExpertChatInput.vue

@@ -287,7 +287,7 @@ button {
         width: 0.75rem; // w-3
         height: 0.75rem; // h-3
         background-color: #1F2937; // gray-800
-        border-radius: 0.125rem; // rounded-sm
+        border-radius: 0.125rem; // rounded-xs
     }
 
     &:hover {

frontend/src/components/expert/components/messages/components/resource-cards/FlowResourceCard.vue

@@ -20,7 +20,7 @@
                         <streamable-content v-model="flowTitle" :should-stream="shouldStream" />
                     </div>
                     <div class="flex items-start gap-2 shrink-0 -mt-1">
-                        <button class="text-gray-600 hover:text-indigo-600 hover:bg-indigo-50 flex items-center transition-colors duration-200 rounded px-2 py-1" @click="flowsExpanded = !flowsExpanded">
+                        <button class="text-gray-600 hover:text-indigo-600 hover:bg-indigo-50 flex items-center transition-colors duration-200 rounded-sm px-2 py-1" @click="flowsExpanded = !flowsExpanded">
                             <span>Preview</span>
                             <chevron-down-icon v-if="flowsExpanded" class="h-4 w-4" />
                             <chevron-up-icon v-if="!flowsExpanded" class="h-4 w-4" />

frontend/src/components/variant-selector/OptionTileSelector.vue

@@ -8,7 +8,7 @@
             <li
                 v-for="option in options"
                 :key="option.id"
-                class="ff-option-tile p-4 border rounded bg-white border-gray-200 cursor-pointer flex items-center justify-center gap-2"
+                class="ff-option-tile p-4 border rounded-sm bg-white border-gray-200 cursor-pointer flex items-center justify-center gap-2"
                 :class="{ 'border-blue-600': modelValue === option.id }"
                 @click="$emit('update:modelValue', option.id)"
             >

frontend/src/index.css

@@ -12,8 +12,8 @@
 
     /* .forge-block {
         @apply bg-white;
-        @apply shadow;
-        @apply rounded;
+        @apply shadow-sm;
+        @apply rounded-sm;
         @apply mx-2;
         @apply sm:mx-4;
         @apply py-6;
@@ -336,7 +336,7 @@
     .uneditable {
         @apply text-sm;
         @apply appearance-none;
-        @apply rounded;
+        @apply rounded-sm;
         @apply relative;
         @apply font-normal;
         @apply px-2;

frontend/src/pages/account/Security/dialogs/MFASetupDialog.vue

@@ -9,7 +9,7 @@
                         </p>
                         <div class="text-center mt-4">
                             <template v-if="!!qrcode">
-                                <img v-if="!!qrcode" :src="qrcode" class="m-auto border rounded">
+                                <img v-if="!!qrcode" :src="qrcode" class="m-auto border rounded-sm">
                                 <p>
                                     <a class="cursor-pointer" @click="showSecret()">Can't scan QR code?</a>
                                 </p>