Merge pull request #42 from azadshaikh/main

style(component-preview): enhance layout and alignment of card and modal components

Author: azadshaikh

src/html/components/component-preview/component-preview.astro

@@ -73,12 +73,14 @@ const backgroundColor = bgColor ? 'var(--content-wrapper-bg)' : 'transparent'
   data-bg-color={bgColor.toString()}
   {...iframeSrc && { 'data-external-src': iframeSrc }}
 >
-  <div class="card-header p-3 border-bottom d-flex justify-content-between align-items-center">
-    <span class="card-title fs-6 mb-0">{title}</span>
+  <div class="card-header p-3 border-bottom d-grid" style="grid-template-columns: 1fr auto 1fr;">
+    <span class="card-title fs-6 mb-0 d-flex align-items-center">{title}</span>
 
-    <PreviewDevices />
+    <div class="d-flex justify-content-center">
+      <PreviewDevices />
+    </div>
 
-    <div class="d-flex justify-content-end">
+    <div class="d-flex justify-content-end align-items-center">
       {
         !disableModal && (
           <PreviewButton
@@ -295,14 +297,19 @@ const backgroundColor = bgColor ? 'var(--content-wrapper-bg)' : 'transparent'
         style="max-width: 95vw; height: 95vh; margin: 1rem auto;"
       >
         <div class="modal-content border-0 h-100">
-          <div class="modal-header py-2 d-flex justify-content-between align-items-center bg-body-secondary border-bottom">
-            <span class="modal-title fs-6 mb-0" id={`${previewId}-label`}>
+          <div
+            class="modal-header py-2 d-grid bg-body-secondary border-bottom"
+            style="grid-template-columns: 1fr auto 1fr;"
+          >
+            <span class="modal-title fs-6 mb-0 d-flex align-items-center" id={`${previewId}-label`}>
               {title}
             </span>
 
-            <PreviewDevices />
+            <div class="d-flex justify-content-center">
+              <PreviewDevices />
+            </div>
 
-            <div class="d-flex justify-content-end gap-2">
+            <div class="d-flex justify-content-end gap-2 align-items-center">
               <PreviewButton
                 icon="ri-sun-line"
                 title="Toggle Theme"