From 6858a6f867641e2d2adde9a9590a6e4bbd7f9046 Mon Sep 17 00:00:00 2001
From: iamsivin <iamsivin@gmail.com>
Date: Wed, 17 Sep 2025 15:24:01 +0530
Subject: [PATCH] chore: Minor fix

---
 .../components-next/captain/AnimatingImg/Guardrails.vue    | 7 ++++---
 .../captain/AnimatingImg/ResponseGuidelines.vue            | 7 ++++---
 .../components-next/captain/AnimatingImg/Scenarios.vue     | 7 ++++---
 .../components-next/captain/AnimatingImg/Settings.vue      | 7 ++++---
 4 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/app/javascript/dashboard/components-next/captain/AnimatingImg/Guardrails.vue b/app/javascript/dashboard/components-next/captain/AnimatingImg/Guardrails.vue
index db3a701fc..e99d01758 100644
--- a/app/javascript/dashboard/components-next/captain/AnimatingImg/Guardrails.vue
+++ b/app/javascript/dashboard/components-next/captain/AnimatingImg/Guardrails.vue
@@ -16,7 +16,7 @@ const toggle = () => {
     tabindex="0"
     @click="toggle"
   >
-    <div class="absolute z-0">
+    <div class="absolute z-0 flex-shrink-0">
       <svg
         width="auto"
         height="auto"
@@ -707,7 +707,7 @@ const toggle = () => {
       xmlns="http://www.w3.org/2000/svg"
       aria-hidden="false"
       focusable="false"
-      class="z-10 relative"
+      class="z-10 relative flex-shrink-0"
     >
       <rect width="136" height="108" fill="url(#paint0_radial_720_25689)" />
       <path
@@ -953,7 +953,8 @@ body.dark svg,
 }
 
 .svg-wrapper {
-  display: inline-block;
+  display: flex;
+  align-items: center;
   cursor: pointer;
   user-select: none;
   -webkit-tap-highlight-color: transparent;
diff --git a/app/javascript/dashboard/components-next/captain/AnimatingImg/ResponseGuidelines.vue b/app/javascript/dashboard/components-next/captain/AnimatingImg/ResponseGuidelines.vue
index f75d8fa38..958f97dee 100644
--- a/app/javascript/dashboard/components-next/captain/AnimatingImg/ResponseGuidelines.vue
+++ b/app/javascript/dashboard/components-next/captain/AnimatingImg/ResponseGuidelines.vue
@@ -17,7 +17,7 @@ const toggle = () => {
     tabindex="0"
     @click="toggle"
   >
-    <div class="absolute z-0">
+    <div class="absolute z-0 flex-shrink-0">
       <svg
         width="auto"
         height="auto"
@@ -706,7 +706,7 @@ const toggle = () => {
       viewBox="0 0 136 108"
       aria-hidden="false"
       focusable="false"
-      class="z-10 relative"
+      class="z-10 relative flex-shrink-0"
     >
       <rect width="136" height="108" fill="url(#paint0_radial_720_25701)" />
       <path
@@ -931,7 +931,8 @@ body.dark svg,
 }
 
 .svg-wrapper {
-  display: inline-block;
+  display: flex;
+  align-items: center;
   cursor: pointer;
   user-select: none;
   -webkit-tap-highlight-color: transparent;
diff --git a/app/javascript/dashboard/components-next/captain/AnimatingImg/Scenarios.vue b/app/javascript/dashboard/components-next/captain/AnimatingImg/Scenarios.vue
index 98019a95f..b50bcf0ac 100644
--- a/app/javascript/dashboard/components-next/captain/AnimatingImg/Scenarios.vue
+++ b/app/javascript/dashboard/components-next/captain/AnimatingImg/Scenarios.vue
@@ -16,7 +16,7 @@ const toggle = () => {
     tabindex="0"
     @click="toggle"
   >
-    <div class="absolute z-0">
+    <div class="absolute z-0 flex-shrink-0">
       <svg
         width="auto"
         height="auto"
@@ -707,7 +707,7 @@ const toggle = () => {
       xmlns="http://www.w3.org/2000/svg"
       aria-hidden="false"
       focusable="false"
-      class="z-10 relative"
+      class="z-10 relative flex-shrink-0"
     >
       <rect width="136" height="108" fill="url(#paint0_radial_720_25695)" />
       <path
@@ -1005,7 +1005,8 @@ body.dark svg,
 }
 
 .svg-wrapper {
-  display: inline-block;
+  display: flex;
+  align-items: center;
   cursor: pointer;
   user-select: none;
   -webkit-tap-highlight-color: transparent;
diff --git a/app/javascript/dashboard/components-next/captain/AnimatingImg/Settings.vue b/app/javascript/dashboard/components-next/captain/AnimatingImg/Settings.vue
index 6c3e21194..d50b2ff54 100644
--- a/app/javascript/dashboard/components-next/captain/AnimatingImg/Settings.vue
+++ b/app/javascript/dashboard/components-next/captain/AnimatingImg/Settings.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="svg-wrapper relative" tabindex="0">
-    <div class="absolute z-0">
+    <div class="absolute z-0 flex-shrink-0">
       <svg
         width="auto"
         height="auto"
@@ -691,7 +691,7 @@
       xmlns="http://www.w3.org/2000/svg"
       aria-hidden="false"
       focusable="false"
-      class="z-10 relative"
+      class="z-10 relative flex-shrink-0"
     >
       <rect width="136" height="108" fill="url(#paint0_radial_797_91519)" />
       <path
@@ -742,7 +742,8 @@ body.dark svg,
 }
 
 .svg-wrapper {
-  display: inline-block;
+  display: flex;
+  align-items: center;
   cursor: pointer;
   user-select: none;
   -webkit-tap-highlight-color: transparent;