Fix AR button layout overlap on Transforms and Dynamic Scaling examples

This commit resolves separate layout overlap issues where large, multi-row control panels block the default bottom-right system AR button on narrow and high-density viewports (e.g., Samsung Galaxy S22 and Pixel 9 Pro Fold).

Following a responsive custom AR button strategy, this change:
1. Adds a custom slotted 'View in AR' button to both the 'Model Transformations' (scenegraph/index.html) and 'Dynamic Scaling' (loading/index.html) examples.
2. Keeps their respective numeric/slider controls positioned at the default bottom-left.
3. Uses CSS Container Queries with a 700px width threshold to smoothly translate the custom AR button to the top-right corner on compact or high-density mobile viewports, ensuring complete visual separation and easy physical access.

These changes have been visually validated side-by-side inside standalone simulated viewports for absolute layout robustness.

Author: diegoteran

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

@@ -433,19 +433,36 @@ <h4>Our renderer tries to keep the frame rate between 38 and 60 frames per secon
                     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.4s cubic-bezier(0.25, 1, 0.5, 1);
+                    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
                   }
-                  @container (max-width: 550px) {
-                    .controls {
+                  @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>

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

@@ -161,9 +161,37 @@ <h2 class="demo-title">Model Transformations</h2>
             </div>
             <example-snippet stamp-to="transforms" highlight-as="html">
               <template>
+                <style>
+                  model-viewer#transform {
+                    container-type: size;
+                  }
+                  .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="transform" orientation="20deg 0 0" shadow-intensity="1" camera-controls
                   touch-action="pan-y" ar src="../../shared-assets/models/Astronaut.glb"
                   alt="A 3D model of an astronaut">
+                  <button slot="ar-button" class="custom-ar-button">View in AR</button>
                   <div class="controls glass">
                     <div>Roll: <input id="roll" value="20" size="3" class="number"> degrees</div>
                     <div>Pitch: <input id="pitch" value="0" size="3" class="number"> degrees</div>