Fix spotlight tile regressions

The buttons were scrolling with the view instead of always being visible in a fixed location on the tile, and the indicators were not adopting the correct width.

src/tile/SpotlightTile.module.css

@@ -14,7 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.tile {
+.contents {
+  block-size: 100%;
+  inline-size: 100%;
   display: flex;
   border-radius: var(--cpd-space-6x);
   contain: strict;
@@ -29,7 +31,7 @@ limitations under the License.
   scroll-behavior: smooth; */
 }
 
-.tile.maximised {
+.tile.maximised .contents {
   border-radius: 0;
 }
 
@@ -153,7 +155,7 @@ limitations under the License.
 }
 
 .indicators > .item {
-  inline-size: 32px;
+  flex-basis: 32px;
   block-size: 2px;
   transition: background-color ease 0.15s;
 }

src/tile/SpotlightTile.tsx

@@ -272,6 +272,7 @@ export const SpotlightTile = forwardRef<HTMLDivElement, Props>(
             <ChevronLeftIcon aria-hidden width={24} height={24} />
           </button>
         )}
+        <div className={styles.contents}>
           {vms.map((vm) => (
             <SpotlightItem
               key={vm.id}
@@ -282,6 +283,7 @@ export const SpotlightTile = forwardRef<HTMLDivElement, Props>(
               snap={scrollToId === null || scrollToId === vm.id}
             />
           ))}
+        </div>
         {onToggleExpanded && (
           <button
             className={classNames(styles.expand)}
@@ -311,7 +313,11 @@ export const SpotlightTile = forwardRef<HTMLDivElement, Props>(
             })}
           >
             {vms.map((vm) => (
-              <div className={styles.item} data-visible={vm.id === visibleId} />
+              <div
+                key={vm.id}
+                className={styles.item}
+                data-visible={vm.id === visibleId}
+              />
             ))}
           </div>
         )}