chore: updated styling for configuration files (#23781)

Author: amehta265

packages/frontend-shared/src/components/Collapsible.vue

@@ -25,6 +25,8 @@
       :aria-hidden="!isOpen"
       :class="{
         'overflow-auto': isOpen && overflow,
+        'border rounded rounded-t-none bg-light-50 border-gray-100 mb-4 w-full block': isOpen && fileRow,
+        'overflow-hidden': !isOpen && fileRow
       }"
     >
       <slot
@@ -45,12 +47,14 @@ const props = withDefaults(defineProps<{
   lazy?: boolean
   disable?: boolean
   overflow?: boolean
+  fileRow?: boolean
 }>(), {
   initiallyOpen: false,
   maxHeight: '500px',
   lazy: false,
   disable: false,
   overflow: true,
+  fileRow: false,
 })
 
 const [isOpen, toggle] = useToggle(props.initiallyOpen)

packages/launchpad/src/components/code/FileRow.vue

@@ -1,15 +1,15 @@
 <template>
   <Collapsible
-    class="border rounded bg-light-50 border-gray-100 mb-4 w-full block
-  overflow-hidden hocus-default"
+    class="rounded bg-light-50 border-gray-100 mb-4 w-full block"
     max-height="500px"
     :initially-open="statusInfo.initiallyOpen"
     :data-cy="status"
+    :file-row="true"
   >
     <template #target="{open}">
       <ListRowHeader
-        :class="{ 'border-b border-b-gray-100 rounded-b-none': open }"
-        class="cursor-pointer font-medium"
+        :class="{ 'rounded-b-none mb-0.1em default-ring': open, 'overflow-hidden': !open }"
+        class="border hocus-default cursor-pointer font-medium"
         :description="description"
         :icon="statusInfo.icon"
       >