Refactor ScreenshotLayout to remove showCard prop and update pages to reflect changes; enhance layout structure with card wrappers for improved styling

screenshots/layouts/ScreenshotLayout.astro

@@ -18,8 +18,6 @@ interface Props {
   rtl?: boolean
   /** the Tabler logo above the card (+ balancing spacer below it) */
   showLogo?: boolean
-  /** wrap the component in the elevated .data-screenshot-targetscreenshot-card; when false the slot renders bare */
-  showCard?: boolean
   /** caps the [data-screenshot-target] width at columns * 320px */
   columns?: number
   /** CSS zoom applied to [data-screenshot-target] */
@@ -30,7 +28,7 @@ interface Props {
   class?: string
 }
 
-const { title, rtl = false, showLogo = true, showCard = true, columns, zoom = 1, pageLibs = [], class: className } = Astro.props
+const { title, rtl = false, showLogo = true, columns, zoom = 1, pageLibs = [], class: className } = Astro.props
 const targetStyle = [columns && `max-width: ${columns * 310}px`, `zoom: ${zoom}`].filter(Boolean).join('; ')
 const rtlSuffix = rtl ? '.rtl' : ''
 // core/dist only has .min. files after a full `pnpm build`; `astro dev` (this
@@ -82,20 +80,13 @@ const libJsFiles = pageLibEntries.flatMap(([, lib]) => (lib.js ?? []).map((file)
         width: 100%;
       }
 
-      .screenshot-wrapper > .card,
-      .screenshot-card {
+      .screenshot-wrapper > .card {
         box-shadow:
           0 1px 1px 0 rgba(0, 0, 0, 0.02),
           0 8px 24px -4px rgba(0, 0, 0, 0.04),
           0 24px 40px -8px rgba(0, 0, 0, 0.1);
       }
 
-      .screenshot-card {
-        padding: 64px;
-        border-radius: 16px;
-        width: 100%;
-      }
-
       .screenshot-logo {
         display: flex;
         align-items: center;
@@ -129,7 +120,7 @@ const libJsFiles = pageLibEntries.flatMap(([, lib]) => (lib.js ?? []).map((file)
           )
         }
 
-        <div class:list={['screenshot-wrapper', showCard && ['screenshot-card', 'card'], className]} style={targetStyle} data-screenshot-target>
+        <div class:list={['screenshot-wrapper', className]} style={targetStyle} data-screenshot-target>
           <slot />
         </div>
 

screenshots/pages/active-subscriptions.astro

@@ -3,6 +3,6 @@ import ScreenshotLayout from '../layouts/ScreenshotLayout.astro'
 import ActiveUsers from '@shared/components/cards/charts/ActiveUsers.astro'
 ---
 
-<ScreenshotLayout title="Active subscriptions" showCard={false} columns={1} pageLibs={['apexcharts']}>
+<ScreenshotLayout title="Active subscriptions" columns={1} pageLibs={['apexcharts']}>
   <ActiveUsers />
 </ScreenshotLayout>

screenshots/pages/auth-lock-card.astro

@@ -3,6 +3,6 @@ import ScreenshotLayout from '../layouts/ScreenshotLayout.astro'
 import AuthLockCard from '@shared/components/cards/AuthLockCard.astro'
 ---
 
-<ScreenshotLayout title="Account Locked" showCard={false} columns={1}>
+<ScreenshotLayout title="Account Locked" columns={1}>
   <AuthLockCard />
 </ScreenshotLayout>

screenshots/pages/chart-radial.astro

@@ -4,5 +4,9 @@ import ChartRadial from '@ui/ChartRadial.astro'
 ---
 
 <ScreenshotLayout title="Task progress" columns={1} pageLibs={['apexcharts']}>
-  <ChartRadial title="Task progress" value={72} />
+  <div class="card">
+    <div class="card-body">
+      <ChartRadial title="Task progress" value={72} />
+    </div>
+  </div>
 </ScreenshotLayout>

screenshots/pages/chat.astro

@@ -4,5 +4,9 @@ import Chat from '@ui/Chat.astro'
 ---
 
 <ScreenshotLayout title="Chat" columns={2}>
-  <Chat />
+  <div class="card">
+    <div class="card-body">
+      <Chat />
+    </div>
+  </div>
 </ScreenshotLayout>

screenshots/pages/conversion-rate.astro

@@ -3,6 +3,6 @@ import ScreenshotLayout from '../layouts/ScreenshotLayout.astro'
 import ConversionRate from '@shared/components/cards/charts/ConversionRate.astro'
 ---
 
-<ScreenshotLayout title="Conversion rate" showCard={false} columns={1}>
+<ScreenshotLayout title="Conversion rate" columns={1}>
   <ConversionRate />
 </ScreenshotLayout>

screenshots/pages/happy-birthday.astro

@@ -3,6 +3,6 @@ import ScreenshotLayout from '../layouts/ScreenshotLayout.astro'
 import HappyBirthday from '@shared/components/cards/HappyBirthday.astro'
 ---
 
-<ScreenshotLayout title="Happy Birthday" showCard={false} columns={1}>
+<ScreenshotLayout title="Happy Birthday" columns={1}>
   <HappyBirthday />
 </ScreenshotLayout>

screenshots/pages/index.astro

@@ -11,14 +11,16 @@ const pages = Object.keys(pageModules)
   .sort()
 ---
 
-<ScreenshotLayout title="Components" showCard={false} columns={2}>
-  <div>
-    {
-      pages.map((slug) => (
-        <a href={`/${slug}`} class="d-block">
-          {slug.replace(/-/g, ' ')}
-        </a>
-      ))
-    }
+<ScreenshotLayout title="Components" columns={2}>
+  <div class="card">
+    <div class="card-body">
+      {
+        pages.map((slug) => (
+          <a href={`/${slug}`} class="d-block">
+            {slug.replace(/-/g, ' ')}
+          </a>
+        ))
+      }
+    </div>
   </div>
 </ScreenshotLayout>

screenshots/pages/map-vector-card.astro

@@ -3,6 +3,6 @@ import ScreenshotLayout from '../layouts/ScreenshotLayout.astro'
 import MapVectorCard from '@shared/components/cards/MapVectorCard.astro'
 ---
 
-<ScreenshotLayout title="Map" showCard={false} columns={2} pageLibs={['jsvectormap']}>
+<ScreenshotLayout title="Map" columns={2} pageLibs={['jsvectormap']}>
   <MapVectorCard title="Locations" />
 </ScreenshotLayout>

screenshots/pages/new-clients.astro

@@ -3,6 +3,6 @@ import ScreenshotLayout from '../layouts/ScreenshotLayout.astro'
 import NewClients from '@shared/components/cards/charts/NewClients.astro'
 ---
 
-<ScreenshotLayout title="New clients" showCard={false} columns={1} pageLibs={['apexcharts']}>
+<ScreenshotLayout title="New clients" columns={1} pageLibs={['apexcharts']}>
   <NewClients />
 </ScreenshotLayout>

screenshots/pages/revenue.astro

@@ -3,6 +3,6 @@ import ScreenshotLayout from '../layouts/ScreenshotLayout.astro'
 import Revenue from '@shared/components/cards/charts/Revenue.astro'
 ---
 
-<ScreenshotLayout title="Revenue" showCard={false} columns={1} pageLibs={['apexcharts']}>
+<ScreenshotLayout title="Revenue" columns={1} pageLibs={['apexcharts']}>
   <Revenue />
 </ScreenshotLayout>

screenshots/pages/sales-overview.astro

@@ -3,6 +3,6 @@ import ScreenshotLayout from '../layouts/ScreenshotLayout.astro'
 import SalesOverview from '@shared/components/cards/charts/SalesOverview.astro'
 ---
 
-<ScreenshotLayout title="Sales overview" showCard={false} pageLibs={['apexcharts']} columns={2}>
+<ScreenshotLayout title="Sales overview" pageLibs={['apexcharts']} columns={2}>
   <SalesOverview />
 </ScreenshotLayout>

screenshots/pages/sales.astro

@@ -3,6 +3,6 @@ import ScreenshotLayout from '../layouts/ScreenshotLayout.astro'
 import Sales from '@shared/components/cards/charts/Sales.astro'
 ---
 
-<ScreenshotLayout title="Sales" showCard={false} columns={1}>
+<ScreenshotLayout title="Sales" columns={1}>
   <Sales />
 </ScreenshotLayout>

screenshots/pages/total-users.astro

@@ -3,6 +3,6 @@ import ScreenshotLayout from '../layouts/ScreenshotLayout.astro'
 import TotalUsers from '@shared/components/cards/charts/TotalUsers.astro'
 ---
 
-<ScreenshotLayout title="Total Users" showCard={false} columns={1} pageLibs={['apexcharts']}>
+<ScreenshotLayout title="Total Users" columns={1} pageLibs={['apexcharts']}>
   <TotalUsers />
 </ScreenshotLayout>

screenshots/pages/user-card-bg.astro

@@ -3,6 +3,6 @@ import ScreenshotLayout from '../layouts/ScreenshotLayout.astro'
 import UserCardBg from '@shared/components/cards/UserCardBg.astro'
 ---
 
-<ScreenshotLayout title="User card" showCard={false} columns={1}>
+<ScreenshotLayout title="User card" columns={1}>
   <UserCardBg />
 </ScreenshotLayout>

screenshots/pages/welcome.astro

@@ -3,6 +3,6 @@ import ScreenshotLayout from '../layouts/ScreenshotLayout.astro'
 import Welcome from '@shared/components/cards/Welcome.astro'
 ---
 
-<ScreenshotLayout title="Welcome" showCard={false} columns={2}>
+<ScreenshotLayout title="Welcome" columns={2}>
   <Welcome />
 </ScreenshotLayout>