diff --git a/dist/samples/ui-kit-place-details/app/index.html b/dist/samples/ui-kit-place-details/app/index.html
index 1ee293b3..1f2f3727 100644
--- a/dist/samples/ui-kit-place-details/app/index.html
+++ b/dist/samples/ui-kit-place-details/app/index.html
@@ -15,16 +15,17 @@
   <body>
     <!--[START maps_ui_kit_place_details_map] -->
     <gmp-map center="47.759737, -122.250632" zoom="16" map-id="DEMO_MAP_ID">
-      <div class="widget-container" slot="control-inline-start-block-start">
-        <gmp-place-details>
-          <gmp-place-details-place-request place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
-          <gmp-place-all-content></gmp-place-all-content> 
-        </gmp-place-details>
-       
-      </div>
-      <gmp-advanced-marker></gmp-advanced-marker>
+        <gmp-advanced-marker></gmp-advanced-marker>
     </gmp-map>
     <!--[END maps_ui_kit_place_details_map] -->
+    <!--[START maps_ui_kit_place_details_container] -->
+    <div class="widget-container" slot="control-inline-start-block-start">
+      <gmp-place-details>
+        <gmp-place-details-place-request place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
+        <gmp-place-all-content></gmp-place-all-content> 
+      </gmp-place-details>
+    </div>
+    <!--[END maps_ui_kit_place_details_container] -->
     <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
         ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
   </body>
diff --git a/dist/samples/ui-kit-place-details/app/style.css b/dist/samples/ui-kit-place-details/app/style.css
index 042e97ae..dc3b189c 100644
--- a/dist/samples/ui-kit-place-details/app/style.css
+++ b/dist/samples/ui-kit-place-details/app/style.css
@@ -9,10 +9,10 @@
  */
 html,
 body {
-  height: 100%;
-  margin: 0;
-  font-family: Arial, Helvetica, sans-serif;
-  display: block;
+    display: flex; /* Use flexbox for layout */
+    justify-content: center; /* Center the content horizontally */
+    align-items: flex-start; /* Align items to the top */
+    width: 100%
 }
 
 h1 {
@@ -25,13 +25,11 @@ gmp-map {
 }
 
 gmp-place-details {
-  background-color: #fff;
-  border-radius: 8px;
+  border-radius: 0px;
   margin: 20px;
   width: 400px;
-  padding: 12px;
-  margin-top: 10px;
-  overflow-y: auto;
+  height: 400px;
+  margin-top: 0px;
 }
 
 gmp-advanced-marker {
@@ -39,9 +37,8 @@ gmp-advanced-marker {
 }
 
 .widget-container {
-  height: 400px;
-  width: 457px; 
-  overflow-y: auto;
-  overflow-x: hidden;
+  min-width: 400px;
+  overflow-y: none;
+  overflow-x: none;
 }
-/* [END maps_ui_kit_place_details] */
\ No newline at end of file
+/* [END maps_ui_kit_place_details] */
diff --git a/dist/samples/ui-kit-place-details/dist/assets/index-Daq7ltsZ.js b/dist/samples/ui-kit-place-details/dist/assets/index-Bjw1R5Z2.js
similarity index 100%
rename from dist/samples/ui-kit-place-details/dist/assets/index-Daq7ltsZ.js
rename to dist/samples/ui-kit-place-details/dist/assets/index-Bjw1R5Z2.js
diff --git a/dist/samples/ui-kit-place-details/dist/assets/index-CPAAOMfx.css b/dist/samples/ui-kit-place-details/dist/assets/index-CPAAOMfx.css
new file mode 100644
index 00000000..7798d4e8
--- /dev/null
+++ b/dist/samples/ui-kit-place-details/dist/assets/index-CPAAOMfx.css
@@ -0,0 +1,5 @@
+/*
+ * @license
+ * Copyright 2025 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */html,body{display:flex;justify-content:center;align-items:flex-start;width:100%}h1{font-size:16px;text-align:center}gmp-map{height:400px}gmp-place-details{border-radius:0;margin:0 20px 20px;width:400px;height:400px}gmp-advanced-marker{display:none}.widget-container{min-width:400px;overflow-y:none;overflow-x:none}
diff --git a/dist/samples/ui-kit-place-details/dist/assets/index-DAWyXXsz.css b/dist/samples/ui-kit-place-details/dist/assets/index-DAWyXXsz.css
deleted file mode 100644
index 522775d4..00000000
--- a/dist/samples/ui-kit-place-details/dist/assets/index-DAWyXXsz.css
+++ /dev/null
@@ -1,5 +0,0 @@
-/*
- * @license
- * Copyright 2025 Google LLC. All Rights Reserved.
- * SPDX-License-Identifier: Apache-2.0
- */html,body{height:100%;margin:0;font-family:Arial,Helvetica,sans-serif;display:block}h1{font-size:16px;text-align:center}gmp-map{height:400px}gmp-place-details{background-color:#fff;border-radius:8px;margin:10px 20px 20px;width:400px;padding:12px;overflow-y:auto}gmp-advanced-marker{display:none}.widget-container{height:400px;width:457px;overflow-y:auto;overflow-x:hidden}
diff --git a/dist/samples/ui-kit-place-details/dist/index.html b/dist/samples/ui-kit-place-details/dist/index.html
index ce89be57..d0507eaa 100644
--- a/dist/samples/ui-kit-place-details/dist/index.html
+++ b/dist/samples/ui-kit-place-details/dist/index.html
@@ -9,22 +9,23 @@
   <head>
     <title>Click on the map to view place details</title>
     <meta charset="utf-8">
-    <script type="module" crossorigin src="./assets/index-Daq7ltsZ.js"></script>
-    <link rel="stylesheet" crossorigin href="./assets/index-DAWyXXsz.css">
+    <script type="module" crossorigin src="./assets/index-Bjw1R5Z2.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index-CPAAOMfx.css">
   </head>
   <body>
     <!--[START maps_ui_kit_place_details_map] -->
     <gmp-map center="47.759737, -122.250632" zoom="16" map-id="DEMO_MAP_ID">
-      <div class="widget-container" slot="control-inline-start-block-start">
-        <gmp-place-details>
-          <gmp-place-details-place-request place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
-          <gmp-place-all-content></gmp-place-all-content> 
-        </gmp-place-details>
-       
-      </div>
-      <gmp-advanced-marker></gmp-advanced-marker>
+        <gmp-advanced-marker></gmp-advanced-marker>
     </gmp-map>
     <!--[END maps_ui_kit_place_details_map] -->
+    <!--[START maps_ui_kit_place_details_container] -->
+    <div class="widget-container" slot="control-inline-start-block-start">
+      <gmp-place-details>
+        <gmp-place-details-place-request place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
+        <gmp-place-all-content></gmp-place-all-content> 
+      </gmp-place-details>
+    </div>
+    <!--[END maps_ui_kit_place_details_container] -->
     <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
         ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
   </body>
diff --git a/dist/samples/ui-kit-place-details/docs/index.html b/dist/samples/ui-kit-place-details/docs/index.html
index 1ee293b3..1f2f3727 100644
--- a/dist/samples/ui-kit-place-details/docs/index.html
+++ b/dist/samples/ui-kit-place-details/docs/index.html
@@ -15,16 +15,17 @@
   <body>
     <!--[START maps_ui_kit_place_details_map] -->
     <gmp-map center="47.759737, -122.250632" zoom="16" map-id="DEMO_MAP_ID">
-      <div class="widget-container" slot="control-inline-start-block-start">
-        <gmp-place-details>
-          <gmp-place-details-place-request place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
-          <gmp-place-all-content></gmp-place-all-content> 
-        </gmp-place-details>
-       
-      </div>
-      <gmp-advanced-marker></gmp-advanced-marker>
+        <gmp-advanced-marker></gmp-advanced-marker>
     </gmp-map>
     <!--[END maps_ui_kit_place_details_map] -->
+    <!--[START maps_ui_kit_place_details_container] -->
+    <div class="widget-container" slot="control-inline-start-block-start">
+      <gmp-place-details>
+        <gmp-place-details-place-request place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
+        <gmp-place-all-content></gmp-place-all-content> 
+      </gmp-place-details>
+    </div>
+    <!--[END maps_ui_kit_place_details_container] -->
     <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
         ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
   </body>
diff --git a/dist/samples/ui-kit-place-details/docs/style.css b/dist/samples/ui-kit-place-details/docs/style.css
index 042e97ae..dc3b189c 100644
--- a/dist/samples/ui-kit-place-details/docs/style.css
+++ b/dist/samples/ui-kit-place-details/docs/style.css
@@ -9,10 +9,10 @@
  */
 html,
 body {
-  height: 100%;
-  margin: 0;
-  font-family: Arial, Helvetica, sans-serif;
-  display: block;
+    display: flex; /* Use flexbox for layout */
+    justify-content: center; /* Center the content horizontally */
+    align-items: flex-start; /* Align items to the top */
+    width: 100%
 }
 
 h1 {
@@ -25,13 +25,11 @@ gmp-map {
 }
 
 gmp-place-details {
-  background-color: #fff;
-  border-radius: 8px;
+  border-radius: 0px;
   margin: 20px;
   width: 400px;
-  padding: 12px;
-  margin-top: 10px;
-  overflow-y: auto;
+  height: 400px;
+  margin-top: 0px;
 }
 
 gmp-advanced-marker {
@@ -39,9 +37,8 @@ gmp-advanced-marker {
 }
 
 .widget-container {
-  height: 400px;
-  width: 457px; 
-  overflow-y: auto;
-  overflow-x: hidden;
+  min-width: 400px;
+  overflow-y: none;
+  overflow-x: none;
 }
-/* [END maps_ui_kit_place_details] */
\ No newline at end of file
+/* [END maps_ui_kit_place_details] */
diff --git a/dist/samples/ui-kit-place-details/jsfiddle/demo.css b/dist/samples/ui-kit-place-details/jsfiddle/demo.css
index 59a6441f..c2a69459 100644
--- a/dist/samples/ui-kit-place-details/jsfiddle/demo.css
+++ b/dist/samples/ui-kit-place-details/jsfiddle/demo.css
@@ -9,10 +9,10 @@
  */
 html,
 body {
-  height: 100%;
-  margin: 0;
-  font-family: Arial, Helvetica, sans-serif;
-  display: block;
+    display: flex; /* Use flexbox for layout */
+    justify-content: center; /* Center the content horizontally */
+    align-items: flex-start; /* Align items to the top */
+    width: 100%
 }
 
 h1 {
@@ -25,13 +25,11 @@ gmp-map {
 }
 
 gmp-place-details {
-  background-color: #fff;
-  border-radius: 8px;
+  border-radius: 0px;
   margin: 20px;
   width: 400px;
-  padding: 12px;
-  margin-top: 10px;
-  overflow-y: auto;
+  height: 400px;
+  margin-top: 0px;
 }
 
 gmp-advanced-marker {
@@ -39,8 +37,8 @@ gmp-advanced-marker {
 }
 
 .widget-container {
-  height: 400px;
-  width: 457px; 
-  overflow-y: auto;
-  overflow-x: hidden;
+  min-width: 400px;
+  overflow-y: none;
+  overflow-x: none;
 }
+
diff --git a/dist/samples/ui-kit-place-details/jsfiddle/demo.html b/dist/samples/ui-kit-place-details/jsfiddle/demo.html
index dfe90f7e..e286d518 100644
--- a/dist/samples/ui-kit-place-details/jsfiddle/demo.html
+++ b/dist/samples/ui-kit-place-details/jsfiddle/demo.html
@@ -15,16 +15,17 @@
   <body>
     
     <gmp-map center="47.759737, -122.250632" zoom="16" map-id="DEMO_MAP_ID">
-      <div class="widget-container" slot="control-inline-start-block-start">
-        <gmp-place-details>
-          <gmp-place-details-place-request place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
-          <gmp-place-all-content></gmp-place-all-content> 
-        </gmp-place-details>
-       
-      </div>
-      <gmp-advanced-marker></gmp-advanced-marker>
+        <gmp-advanced-marker></gmp-advanced-marker>
     </gmp-map>
     
+    
+    <div class="widget-container" slot="control-inline-start-block-start">
+      <gmp-place-details>
+        <gmp-place-details-place-request place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
+        <gmp-place-all-content></gmp-place-all-content> 
+      </gmp-place-details>
+    </div>
+    
     <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
         ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
   </body>
