Fix AR button overlap on Samsung devices by shifting custom AR button via container queries

Author: diegoteran

packages/modelviewer.dev/examples/loading/index.html

@@ -425,17 +425,44 @@ <h4>Our renderer tries to keep the frame rate between 38 and 60 frames per secon
             <example-snippet stamp-to="renderScale" highlight-as="html">
               <template>
                 <style>
+                  model-viewer#scale {
+                    container-type: size;
+                  }
                   .controls {
                     position: absolute;
                     display: flex;
                     flex-direction: column;
                     align-items: flex-start;
-                    top: 16px;
+                    bottom: 16px;
                     left: 16px;
+                    z-index: 10;
+                  }
+                  .custom-ar-button {
+                    position: absolute;
+                    top: 16px;
+                    right: 16px;
+                    background-color: white;
+                    border: 1px solid #dadce0;
+                    border-radius: 4px;
+                    padding: 8px 12px;
+                    font-weight: 500;
+                    font-size: 14px;
+                    color: #1a73e8;
+                    box-shadow: 0 2px 4px rgba(0,0,0,.1);
+                    cursor: pointer;
+                    z-index: 10;
+                    transform: translateY(calc(100cqh - 100% - 32px));
+                    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+                  }
+                  @container (max-width: 700px) {
+                    .custom-ar-button {
+                      transform: translateY(0px);
+                    }
                   }
                 </style>
                 <model-viewer id="scale" alt="A 3D model of a toy car" camera-controls touch-action="pan-y" auto-rotate
                   src="../../shared-assets/models/glTF-Sample-Assets/Models/ToyCar/glTF-Binary/ToyCar.glb" ar>
+                  <button slot="ar-button" class="custom-ar-button">View in AR</button>
                   <div class="controls glass">
                     <div>
                       Reported DPR: <span id="reportedDpr"></span>