From 6cc44c9d7a122227f83983b0647b3dcb88bb2bfc Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Mon, 13 Jan 2025 13:39:44 +0300
Subject: [PATCH] Better responsive images

---
 apps/showcase/doc/designer/DashboardDoc.vue          | 2 +-
 apps/showcase/doc/designer/MigrationAssistantDoc.vue | 2 +-
 apps/showcase/doc/designer/createtheme/FigmaDoc.vue  | 2 +-
 apps/showcase/doc/designer/editor/TypographyDoc.vue  | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/showcase/doc/designer/DashboardDoc.vue b/apps/showcase/doc/designer/DashboardDoc.vue
index 52ef860e4..70c4ca8fe 100644
--- a/apps/showcase/doc/designer/DashboardDoc.vue
+++ b/apps/showcase/doc/designer/DashboardDoc.vue
@@ -5,7 +5,7 @@
             A theme can be renamed, duplicated and downloaded using the <i class="pi pi-ellipsis-h !text-sm"></i> button.
         </p>
     </DocSectionText>
-    <div class="w-full sm:w-[48rem] px-8 pt-8 bg-surface-0 dark:bg-surface-900 rounded-2xl border border-surface">
+    <div class="px-8 pt-8 bg-surface-0 dark:bg-surface-900 rounded-2xl border border-surface" style="max-width: 48rem">
         <img alt="Designer Dashboard" src="https://primefaces.org/cdn/designer/guide-dashboard.png" class="w-full" />
     </div>
 </template>
diff --git a/apps/showcase/doc/designer/MigrationAssistantDoc.vue b/apps/showcase/doc/designer/MigrationAssistantDoc.vue
index ca30b8c3b..9690a525e 100644
--- a/apps/showcase/doc/designer/MigrationAssistantDoc.vue
+++ b/apps/showcase/doc/designer/MigrationAssistantDoc.vue
@@ -6,7 +6,7 @@
             backup and run a preview before the migration. Depending on the result, you may choose to proceed with the migration process. In case there are missing tokens, your theme would receive them with placeholder values so it is recommended to
             take a note of them before migration and then visit the components to replace the placeholder values with actual values of your choice. These types of newly added tokens would be highlighed in Editor.
         </p>
-        <div class="w-full sm:w-[48rem] px-8 pt-8 bg-surface-0 dark:bg-surface-900 rounded-2xl border border-surface">
+        <div class="px-8 pt-8 bg-surface-0 dark:bg-surface-900 rounded-2xl border border-surface" style="max-width: 48rem">
             <img alt="Designer Dashboard" src="https://primefaces.org/cdn/designer/guide-migration.png" class="w-full" />
         </div>
     </DocSectionText>
diff --git a/apps/showcase/doc/designer/createtheme/FigmaDoc.vue b/apps/showcase/doc/designer/createtheme/FigmaDoc.vue
index 3245b9a43..70036d5c4 100644
--- a/apps/showcase/doc/designer/createtheme/FigmaDoc.vue
+++ b/apps/showcase/doc/designer/createtheme/FigmaDoc.vue
@@ -6,7 +6,7 @@
             UI Kit version is older, the transformation process marks the missing tokens and recommends an auto migration via the migration assistant. This is an automated workflow and eliminates the manual design to code during the handoff process.
             If you have UI designers in your team, the recommended approach is using Figma for the actual design process and utilizing the designer for transformation, preview and download purposes.
         </p>
-        <div class="w-full sm:w-[48rem] pl-8 pr-4 pt-4 bg-surface-0 dark:bg-surface-900 rounded-2xl border border-surface">
+        <div class="pl-8 pr-4 pt-4 bg-surface-0 dark:bg-surface-900 rounded-2xl border border-surface" style="max-width: 48rem">
             <img alt="Designer Dashboard" src="https://primefaces.org/cdn/designer/guide-create.png" class="w-full" />
         </div>
     </DocSectionText>
diff --git a/apps/showcase/doc/designer/editor/TypographyDoc.vue b/apps/showcase/doc/designer/editor/TypographyDoc.vue
index 77e19ae88..31b07b9ff 100644
--- a/apps/showcase/doc/designer/editor/TypographyDoc.vue
+++ b/apps/showcase/doc/designer/editor/TypographyDoc.vue
@@ -4,7 +4,7 @@
             The components are not opinionated about the typography. Important properties such as the font family, font size, and line-height do not have design tokens since they can be inherited from the document. For preview purposes, the
             <i>settings</i> tab displays options to customize the base font and the font family of the document. These values are not available in the generated theme and need to be applied to your application at the document level.
         </p>
-        <div class="w-full sm:w-[48rem] px-8 pt-8 bg-surface-0 dark:bg-surface-900 rounded-2xl border border-surface">
+        <div class="px-8 pt-8 bg-surface-0 dark:bg-surface-900 rounded-2xl border border-surface" style="max-width: 48rem">
             <img alt="Designer Dashboard" src="https://primefaces.org/cdn/designer/guide-editor.png" class="w-full" />
         </div>
     </DocSectionText>