diff --git a/.prettierrc b/.prettierrc
index 553647e8..ab940c5f 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,4 +1,5 @@
 {
+  "$schema": "https://json.schemastore.org/prettierrc",
   "trailingComma": "all",
   "semi": true,
   "printWidth": 120,
diff --git a/dev/spectrogram.html b/dev/spectrogram.html
index 43037e01..d087c11d 100644
--- a/dev/spectrogram.html
+++ b/dev/spectrogram.html
@@ -8,7 +8,7 @@
   </head>
 
   <body>
-    <oe-axes style="padding: 6rem">
+    <oe-axes>
       <oe-indicator>
         <oe-spectrogram
           id="playing-spectrogram"
diff --git a/dev/use-cases/dani-alternative.html b/dev/use-cases/dani-alternative.html
index fd97a065..04e14e12 100644
--- a/dev/use-cases/dani-alternative.html
+++ b/dev/use-cases/dani-alternative.html
@@ -8,32 +8,16 @@
   </head>
 
   <body>
-    <div id="grid-host">
-      <oe-verification-grid id="verification-grid" grid-size="4">
-        <oe-verification verified="true" shortcut="Y"></oe-verification>
-        <oe-verification verified="false" shortcut="N"></oe-verification>
+    <oe-verification-grid id="verification-grid" grid-size="4">
+      <oe-verification verified="true" shortcut="Y"></oe-verification>
+      <oe-verification verified="false" shortcut="N"></oe-verification>
 
-        <oe-classification tag="male" shortcut="H"></oe-classification>
-        <oe-classification tag="female" shortcut="J"></oe-classification>
-        <oe-classification tag="fledgling" shortcut="K"></oe-classification>
-        <oe-classification tag="in-flight" shortcut="L"></oe-classification>
+      <oe-classification tag="male" true-shortcut="h"></oe-classification>
+      <oe-classification tag="female" true-shortcut="j"></oe-classification>
+      <oe-classification tag="fledgling" true-shortcut="k"></oe-classification>
+      <oe-classification tag="in-flight" true-shortcut="l"></oe-classification>
 
-        <oe-data-source slot="data-source" for="verification-grid" src="/kaleidoscope.csv"></oe-data-source>
-      </oe-verification-grid>
-    </div>
-
-    <style>
-      body {
-        margin: 0px;
-      }
-
-      #grid-host {
-        position: relative;
-        left: 0px;
-        top: 0px;
-        width: 100vw;
-        min-height: 100vh;
-      }
-    </style>
+      <oe-data-source slot="data-source" for="verification-grid" src="/kaleidoscope.csv"></oe-data-source>
+    </oe-verification-grid>
   </body>
 </html>
diff --git a/dev/use-cases/dani.html b/dev/use-cases/dani.html
index b784c900..7514815d 100644
--- a/dev/use-cases/dani.html
+++ b/dev/use-cases/dani.html
@@ -8,30 +8,14 @@
   </head>
 
   <body>
-    <div id="grid-host">
-      <oe-verification-grid id="verification-grid" grid-size="4">
-        <oe-verification verified="true" additional-tags="female" shortcut="H"></oe-verification>
-        <oe-verification verified="true" additional-tags="male" shortcut="J"></oe-verification>
-        <oe-verification verified="true" additional-tags="fledgling" shortcut="K"></oe-verification>
-        <oe-verification verified="true" additional-tags="in-flight" shortcut="L"></oe-verification>
-        <oe-verification verified="false" shortcut="N"></oe-verification>
+    <oe-verification-grid id="verification-grid">
+      <oe-verification verified="true" additional-tags="female" shortcut="H"></oe-verification>
+      <oe-verification verified="true" additional-tags="male" shortcut="J"></oe-verification>
+      <oe-verification verified="true" additional-tags="fledgling" shortcut="K"></oe-verification>
+      <oe-verification verified="true" additional-tags="in-flight" shortcut="L"></oe-verification>
+      <oe-verification verified="false" shortcut="N"></oe-verification>
 
-        <oe-data-source slot="data-source" for="verification-grid" src="/kaleidoscope.csv" local></oe-data-source>
-      </oe-verification-grid>
-    </div>
-
-    <style>
-      body {
-        margin: 0px;
-      }
-
-      #grid-host {
-        position: relative;
-        left: 0px;
-        top: 0px;
-        width: 100vw;
-        min-height: 100vh;
-      }
-    </style>
+      <oe-data-source slot="data-source" for="verification-grid" src="/kaleidoscope.csv" local></oe-data-source>
+    </oe-verification-grid>
   </body>
 </html>
diff --git a/dev/use-cases/nsw.html b/dev/use-cases/nsw.html
index 4f9fcf25..c1dbd43f 100644
--- a/dev/use-cases/nsw.html
+++ b/dev/use-cases/nsw.html
@@ -8,31 +8,11 @@
   </head>
 
   <body>
-    <div id="grid-host">
-      <oe-verification-grid id="verification-grid" grid-size="4">
-        <template>
-          <oe-info-card></oe-info-card>
-        </template>
+    <oe-verification-grid id="verification-grid">
+      <oe-verification verified="true" shortcut="Y"></oe-verification>
+      <oe-verification verified="false" shortcut="N"></oe-verification>
 
-        <oe-verification verified="true" shortcut="Y"></oe-verification>
-        <oe-verification verified="false" shortcut="N"></oe-verification>
-
-        <oe-data-source slot="data-source" for="verification-grid" src="/kaleidoscope.csv" local></oe-data-source>
-      </oe-verification-grid>
-    </div>
-
-    <style>
-      body {
-        margin: 0px;
-      }
-
-      #grid-host {
-        position: relative;
-        left: 0px;
-        top: 0px;
-        width: 100vw;
-        min-height: 100vh;
-      }
-    </style>
+      <oe-data-source slot="data-source" for="verification-grid" src="/kaleidoscope.csv"></oe-data-source>
+    </oe-verification-grid>
   </body>
 </html>
diff --git a/dev/use-cases/phil.html b/dev/use-cases/phil.html
index 4909dd6b..797f58d9 100644
--- a/dev/use-cases/phil.html
+++ b/dev/use-cases/phil.html
@@ -8,28 +8,12 @@
   </head>
 
   <body>
-    <div id="grid-host">
-      <oe-verification-grid id="verification-grid" grid-size="4">
-        <oe-classification tag="koala" true-shortcut="h"></oe-classification>
-        <oe-classification tag="car" true-shortcut="j"></oe-classification>
-        <oe-classification tag="crickets" true-shortcut="k"></oe-classification>
+    <oe-verification-grid id="verification-grid">
+      <oe-classification tag="koala" true-shortcut="h"></oe-classification>
+      <oe-classification tag="car" true-shortcut="j"></oe-classification>
+      <oe-classification tag="crickets" true-shortcut="k"></oe-classification>
 
-        <oe-data-source slot="data-source" for="verification-grid" src="/kaleidoscope.csv" local></oe-data-source>
-      </oe-verification-grid>
-    </div>
-
-    <style>
-      body {
-        margin: 0px;
-      }
-
-      #grid-host {
-        position: relative;
-        left: 0px;
-        top: 0px;
-        width: 100vw;
-        min-height: 100vh;
-      }
-    </style>
+      <oe-data-source slot="data-source" for="verification-grid" src="/kaleidoscope.csv"></oe-data-source>
+    </oe-verification-grid>
   </body>
 </html>
diff --git a/dev/use-cases/slade-classification.html b/dev/use-cases/slade-classification.html
index 1024d92e..9842d1c6 100644
--- a/dev/use-cases/slade-classification.html
+++ b/dev/use-cases/slade-classification.html
@@ -8,26 +8,14 @@
   </head>
 
   <body>
-    <div id="grid-host">
-      <oe-verification-grid id="verification-grid" grid-size="1">
-        <template>
-          <oe-info-card></oe-info-card>
-        </template>
+    <oe-verification-grid id="verification-grid" grid-size="1">
+      <template>
+        <oe-info-card></oe-info-card>
+      </template>
 
-        <oe-classification true-shortcut="y" false-shortcut="n" tag="blue winged kookaburra"></oe-classification>
+      <oe-classification true-shortcut="y" false-shortcut="n" tag="blue winged kookaburra"></oe-classification>
 
-        <oe-data-source slot="data-source" for="verification-grid" src="/kaleidoscope.csv" local> </oe-data-source>
-      </oe-verification-grid>
-    </div>
-
-    <style>
-      #grid-host {
-        position: relative;
-        left: 0px;
-        top: 0px;
-        width: 100vw;
-        min-height: 100vh;
-      }
-    </style>
+      <oe-data-source slot="data-source" for="verification-grid" src="/kaleidoscope.csv" local> </oe-data-source>
+    </oe-verification-grid>
   </body>
 </html>
diff --git a/dev/use-cases/slade-verification.html b/dev/use-cases/slade-verification.html
index 9d5e8836..6cd472b0 100644
--- a/dev/use-cases/slade-verification.html
+++ b/dev/use-cases/slade-verification.html
@@ -8,28 +8,16 @@
   </head>
 
   <body>
-    <div id="grid-host">
-      <oe-verification-grid id="verification-grid" grid-size="1">
-        <template>
-          <oe-info-card></oe-info-card>
-        </template>
+    <oe-verification-grid id="verification-grid" grid-size="1">
+      <template>
+        <oe-info-card></oe-info-card>
+      </template>
 
-        <oe-verification verified="true" shortcut="Y"></oe-verification>
-        <oe-verification verified="false" shortcut="N"></oe-verification>
-        <oe-verification verified="unsure" shortcut="U"></oe-verification>
+      <oe-verification verified="true" shortcut="Y"></oe-verification>
+      <oe-verification verified="false" shortcut="N"></oe-verification>
+      <oe-verification verified="unsure" shortcut="U"></oe-verification>
 
-        <oe-data-source slot="data-source" for="verification-grid" src="/kaleidoscope.csv" local></oe-data-source>
-      </oe-verification-grid>
-    </div>
-
-    <style>
-      #grid-host {
-        position: relative;
-        left: 0px;
-        top: 0px;
-        width: 100vw;
-        min-height: 100vh;
-      }
-    </style>
+      <oe-data-source slot="data-source" for="verification-grid" src="/kaleidoscope.csv" local></oe-data-source>
+    </oe-verification-grid>
   </body>
 </html>
diff --git a/dev/use-cases/use-case-6.html b/dev/use-cases/use-case-6.html
index 4feb1d95..516c886b 100644
--- a/dev/use-cases/use-case-6.html
+++ b/dev/use-cases/use-case-6.html
@@ -8,34 +8,18 @@
   </head>
 
   <body>
-    <div id="grid-host">
-      <oe-verification-grid id="verification-grid" grid-size="4">
-        <template>
-          <oe-info-card></oe-info-card>
-        </template>
+    <oe-verification-grid id="verification-grid">
+      <template>
+        <oe-info-card></oe-info-card>
+      </template>
 
-        <oe-verification verified="true" shortcut="Y"></oe-verification>
-        <oe-verification verified="false" shortcut="N"></oe-verification>
+      <oe-verification verified="true" shortcut="Y"></oe-verification>
+      <oe-verification verified="false" shortcut="N"></oe-verification>
 
-        <oe-verification verified="true" shortcut="U" additional-tags="rain"></oe-verification>
-        <oe-verification verified="false" shortcut="M" additional-tags="rain"></oe-verification>
+      <oe-verification verified="true" shortcut="U" additional-tags="rain"></oe-verification>
+      <oe-verification verified="false" shortcut="M" additional-tags="rain"></oe-verification>
 
-        <oe-data-source slot="data-source" for="verification-grid" src="/kaledioscope.csv"> </oe-data-source>
-      </oe-verification-grid>
-    </div>
-
-    <style>
-      body {
-        margin: 0px;
-      }
-
-      #grid-host {
-        position: relative;
-        left: 0px;
-        top: 0px;
-        width: 100vw;
-        min-height: 100vh;
-      }
-    </style>
+      <oe-data-source slot="data-source" for="verification-grid" src="/kaleidoscope.csv"> </oe-data-source>
+    </oe-verification-grid>
   </body>
 </html>
diff --git a/dev/verification-grid.html b/dev/verification-grid.html
index ab98a861..c73fb76f 100644
--- a/dev/verification-grid.html
+++ b/dev/verification-grid.html
@@ -8,30 +8,28 @@
   </head>
 
   <body>
-    <oe-verification-grid id="verification-grid" grid-size="4">
+    <oe-verification-grid id="verification-grid">
       <template>
-        <oe-info-card></oe-info-card>
+        <div>
+          <h1>Large text test</h1>
+
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil odio laboriosam ea culpa magnam aut iure,
+            voluptate nisi. Enim natus blanditiis quam ipsa vero magni deserunt ratione qui explicabo. Est!
+          </p>
+        </div>
       </template>
 
-      <oe-verification verified="TRUE" shortcut="H"></oe-verification>
-      <oe-verification verified="TRUE" additional-tags="hello,world" shortcut="J"></oe-verification>
-      <oe-verification verified="FALSE" shortcut="K"></oe-verification>
-      <oe-verification verified="SKIP" shortcut="L"></oe-verification>
-      <oe-verification verified="UNSURE" shortcut=";"></oe-verification>
+      <oe-verification verified="true" shortcut="H"></oe-verification>
+      <oe-verification verified="true" additional-tags="hello,world" shortcut="J"></oe-verification>
+      <oe-verification verified="false" shortcut="K"></oe-verification>
+      <oe-verification verified="skip" shortcut="L"></oe-verification>
+      <oe-verification verified="unsure" shortcut=";"></oe-verification>
 
-      <!--
-            We should see an error thrown for this classification component
-            because it does not have a tag attribute
-        -->
       <oe-classification true-shortcut="m" tag="Cow"></oe-classification>
 
-      <!--
-            local would use a file picker UI, while src would allow a remote file
-            This should probably use a data service.
-            This service would
-        -->
       <!-- <oe-data-source for="verification-grid" local></oe-data-source> -->
-      <oe-data-source slot="data-source" for="verification-grid" src="/grid-items.json" local> </oe-data-source>
+      <oe-data-source slot="data-source" for="verification-grid" src="/grid-items.json" local></oe-data-source>
     </oe-verification-grid>
 
     <button onclick="changeVerificationGridSize();">Change explicit grid size</button>
@@ -40,12 +38,6 @@
     <button onclick="changeSelectionBehavior();">Change selection behavior</button>
     <button onclick="changeCallback();">Use custom callback</button>
 
-    <style>
-      body {
-        margin: 0px;
-      }
-    </style>
-
     <script>
       const verificationGridElement = document.getElementById("verification-grid");
 
diff --git a/src/components/axes/axes.ts b/src/components/axes/axes.ts
index 458761f0..7b3aebd3 100644
--- a/src/components/axes/axes.ts
+++ b/src/components/axes/axes.ts
@@ -59,6 +59,8 @@ import axesStyles from "./css/style.css?inline";
 export class AxesComponent extends SignalWatcher(AbstractComponent(LitElement)) {
   public static styles = unsafeCSS(axesStyles);
 
+  public static fontCanvas: HTMLCanvasElement = document.createElement("canvas");
+
   // label padding is the minimum additional distance between the labels
   // while the titleOffset is the distance between the axis title and the axis labels
   private static labelPadding: EmUnit = 0.25;
@@ -108,8 +110,8 @@ export class AxesComponent extends SignalWatcher(AbstractComponent(LitElement))
   @queryDeeplyAssignedElement({ selector: "oe-spectrogram" })
   private spectrogram!: SpectrogramComponent;
 
-  @query("#wrapped-element")
-  private wrappedElement!: Readonly<HTMLDivElement>;
+  @query("#axes-svg")
+  private elementChrome!: Readonly<HTMLDivElement>;
 
   // if we do not know the text that we want to measure, we use one large
   // character as an upperbound estimate of the size of characters
@@ -157,15 +159,15 @@ export class AxesComponent extends SignalWatcher(AbstractComponent(LitElement))
       // we don't have to use a resize observer to observe when the spectrogram
       // or slotted elements resize because we will receive a signal from the
       // unit converter which will trigger a re-render
-      this.unitConverter.canvasSize.subscribe(this.handleCanvasResize);
+      this.unitConverter.canvasSize.subscribe((value) => this.handleCanvasResize(value));
     }
   }
 
   private handleCanvasResize(canvasSize: Size): void {
-    if (this?.wrappedElement) {
+    if (this?.elementChrome) {
       const { width, height } = canvasSize;
-      this.wrappedElement.style.width = `${width}px`;
-      this.wrappedElement.style.height = `${height}px`;
+      this.elementChrome.style.width = `${width}px`;
+      this.elementChrome.style.height = `${height}px`;
     }
   }
 
@@ -218,7 +220,7 @@ export class AxesComponent extends SignalWatcher(AbstractComponent(LitElement))
     )}`;
 
     return svg`
-      <g g part = "grid" >
+      <g part="grid" >
         ${this.showXGrid ? svg`<g part="x-grid">${xAxisGridLinesTemplate}</g>` : nothing}
         ${this.showYGrid ? svg`<g part="y-grid">${yAxisGridLinesTemplate}</g>` : nothing}
       </g>
@@ -240,6 +242,13 @@ export class AxesComponent extends SignalWatcher(AbstractComponent(LitElement))
     const xTitleOffset = xTitleFontSize.height + fontSize.height + this.tickSize.height + this.titleOffset.height;
     const yTitleOffset = yTitleFontSize.height + fontSize.width;
 
+    if (this.elementChrome) {
+      const xAxisPadding = xTitleOffset + xTitleFontSize.height;
+      const yAxisPadding = yTitleOffset;
+      this.elementChrome.style.setProperty("--x-axis-padding", `${xAxisPadding}px`);
+      this.elementChrome.style.setProperty("--y-axis-padding", `${yAxisPadding}px`);
+    }
+
     const xLabelTemplate = (value: Seconds) => {
       const xPosition = this.unitConverter.scaleX.value(value);
       const labelYPosition = canvasSize.height + this.tickSize.height;
@@ -249,9 +258,9 @@ export class AxesComponent extends SignalWatcher(AbstractComponent(LitElement))
         <g>
           <line
             part="x-tick"
-            x = "${xPosition}"
-            y1 = "${tickYPosition}"
-            y2 = "${tickYPosition + this.tickSize.height}"
+            x="${xPosition}"
+            y1="${tickYPosition}"
+            y2="${tickYPosition + this.tickSize.height}"
           ></line>
           <text
             part="x-label"
@@ -388,20 +397,33 @@ export class AxesComponent extends SignalWatcher(AbstractComponent(LitElement))
     // if the axis will fit. However, if we are using mel scale, then we have to
     // do some more complex calculations to check that the labels will fit
     if (!melScale) {
-      const domainDelta = domain[1] - domain[0];
+      const domainDelta = Math.abs(domain[1] - domain[0]);
       const numberOfProposedLabels = Math.ceil(domainDelta / proposedStep);
-      const proposedSize = numberOfProposedLabels * (fontSize + textLabelPadding);
+
+      // we double the padding because the padding is applied to both sides of
+      // the label
+      //
+      // prettier removes the brackets because they are not need
+      // however, I want to add them because it makes the code and algorithm
+      // more readable
+      // prettier-ignore
+      const proposedSize = numberOfProposedLabels * (fontSize + (textLabelPadding * 2));
       return proposedSize < canvasSize;
     }
 
     // to check if the mel scale will fit, we can calculate the canvas position
     // of the last two labels and check if they overlap
-    // TODO: we shouldn't re-compute all the positions
+    // this is because the last two labels will be the closest together and the
+    // most likely to be overlapping
     const proposedValues = this.generateAxisValues(domain[0], domain[1], proposedStep, scale, false);
     const lastTwoValues = proposedValues.slice(-2);
     const lastTwoPositions = lastTwoValues.map((value) => scale(value));
-    const positionDelta = lastTwoPositions[0] - lastTwoPositions[1];
-    return positionDelta > fontSize + textLabelPadding;
+    const positionDelta = Math.abs(lastTwoPositions[0] - lastTwoPositions[1]);
+
+    // we multiple the padding by two so that the padding is virtually applied
+    // to both labels in the axes
+    // prettier-ignore
+    return positionDelta > fontSize + (textLabelPadding * 2);
   }
 
   // the calculate step function will use a binary search to find the largest
@@ -499,21 +521,15 @@ export class AxesComponent extends SignalWatcher(AbstractComponent(LitElement))
     const gridLines = this.createGridLinesTemplate(xValues, yValues, canvasSize);
     const labels = this.createAxisLabelsTemplate(xValues, yValues, canvasSize);
 
-    return html`<svg>${gridLines} ${labels}</svg>`;
+    return html`<svg id="axes-svg">${gridLines} ${labels}</svg>`;
   }
 
   public render() {
     return html`
-      <div id="wrapped-element">
-        ${this.unitConverter ? this.axesTemplate() : nothing}
-        <slot @slotchange="${this.handleSlotChange}"></slot>
-      </div>
+      ${this.unitConverter ? this.axesTemplate() : nothing}
+      <slot @slotchange="${this.handleSlotChange}"></slot>
     `;
   }
-
-  // TODO: the canvas that we use to calculate the font width/height should be
-  // cached as a static field
-  public static fontCanvas: HTMLCanvasElement = document.createElement("canvas");
 }
 
 declare global {
diff --git a/src/components/axes/css/style.css b/src/components/axes/css/style.css
index 5cc58c27..49b203f2 100644
--- a/src/components/axes/css/style.css
+++ b/src/components/axes/css/style.css
@@ -1,18 +1,41 @@
 :host {
-  position: relative;
-  display: inline-block !important;
-  width: 100%;
+  /*
+    This is the initial padding applied to both axes
+    It should be overwritten with the actual padding values once we know how
+    much space the axes labels will take up
+
+    We set an initial padding size to a reasonable value so that elements don't
+    change their position too much when the axes labels are added
+  */
+  --x-axis-padding: 2em;
+  --y-axis-padding: 2em;
+
+  min-height: calc(128px + var(--y-axis-padding)) !important;
+
+  padding-bottom: var(--x-axis-padding);
+  padding-left: var(--y-axis-padding);
+
+  &::part(grid) {
+    color: lightblue;
+    stroke-width: 1;
+    opacity: 0.4;
+  }
+
+  &::part(tick) {
+    color: black;
+    stroke-width: 1;
+  }
 }
 
-#wrapped-element {
-  position: relative;
-  padding-left: 2rem;
-  padding-bottom: 1.5rem;
+slot {
+  display: inherit;
+  height: 100%;
+  min-height: 0px;
 }
 
-svg {
+#axes-svg {
   position: absolute;
-  width: 100%;
+  width: auto;
   height: auto;
   overflow: visible;
 
@@ -36,15 +59,3 @@ svg {
     stroke: currentColor;
   }
 }
-
-.grid-line {
-  stroke-width: 1;
-  opacity: 0.4;
-}
-
-:host {
-  &::part(tick),
-  &::part(grid) {
-    color: lightblue;
-  }
-}
diff --git a/src/components/indicator/indicator.ts b/src/components/indicator/indicator.ts
index 2ae40abc..efd7771f 100644
--- a/src/components/indicator/indicator.ts
+++ b/src/components/indicator/indicator.ts
@@ -24,8 +24,8 @@ export class IndicatorComponent extends AbstractComponent(LitElement) {
   @queryDeeplyAssignedElement({ selector: "oe-spectrogram" })
   private spectrogram?: SpectrogramComponent;
 
-  @query("#wrapped-element")
-  private wrappedElement!: Readonly<HTMLDivElement>;
+  @query("#indicator-svg")
+  private indicatorSvg!: Readonly<HTMLDivElement>;
 
   private unitConverter?: UnitConverter;
   private computedTimePx: ReadonlySignal<number> = computed(() => 0);
@@ -45,22 +45,22 @@ export class IndicatorComponent extends AbstractComponent(LitElement) {
       });
 
       if (this.unitConverter) {
-        this.unitConverter.canvasSize.subscribe(this.handleCanvasResize);
+        this.unitConverter.canvasSize.subscribe((value) => this.handleCanvasResize(value));
       }
     }
   }
 
   private handleCanvasResize(canvasSize: Size): void {
-    if (this?.wrappedElement) {
+    if (this?.indicatorSvg) {
       const { width, height } = canvasSize;
-      this.wrappedElement.style.width = `${width}px`;
-      this.wrappedElement.style.height = `${height}px`;
+      this.indicatorSvg.style.width = `${width}px`;
+      this.indicatorSvg.style.height = `${height}px`;
     }
   }
 
   public render() {
     return html`
-      <div id="wrapped-element">
+      <div id="wrapped-element" class="vertically-fill">
         <svg id="indicator-svg">
           <g id="indicator-group" style="transform: translateX(${watch(this.computedTimePx)}px);">
             <line id="indicator-line" part="indicator-line" y1="0" y2="100%"></line>
diff --git a/src/components/spectrogram/css/style.css b/src/components/spectrogram/css/style.css
index ee4735da..a9bc7a54 100644
--- a/src/components/spectrogram/css/style.css
+++ b/src/components/spectrogram/css/style.css
@@ -1,23 +1,37 @@
 :host {
+  /*
+    TODO: we should remove display: block from the components :host
+    Because :host is user configurable, we should not add style properties
+    that are used to effect the layout of shadow DOM children.
+
+    Using display: block here means that if the user changes the display on
+    the host element, it will break the layout of the spectrogram.
+
+    e.g. <oe-spectrogram style="display: inline-block"></oe-spectrogram>
+    can potentially break the layout spectrogram content.
+  */
   display: block;
+
+  --min-height: 128px;
 }
 
 #spectrogram-container {
   position: relative;
   background-color: var(--oe-panel-color-lighter);
   width: 100%;
-  height: auto;
+  height: 100%;
+  min-height: var(--min-height);
 }
 
 #spectrogram-container > canvas {
   position: relative;
   display: inherit;
-  height: auto;
+  height: 100%;
 
   /*
     We set the minimum height to 64 because the minimum FFT window size that
     we support is 64 samples. Therefore, if the user does not specify a container
     with a minimum height, we should at least show 64px in height (the width will auto-scale)
   */
-  min-height: 128px;
+  min-height: var(--min-height);
 }
diff --git a/src/components/spectrogram/spectrogram.ts b/src/components/spectrogram/spectrogram.ts
index af4009e5..4812a980 100644
--- a/src/components/spectrogram/spectrogram.ts
+++ b/src/components/spectrogram/spectrogram.ts
@@ -184,6 +184,17 @@ export class SpectrogramComponent extends SignalWatcher(AbstractComponent(LitEle
   // todo: this should be part of a mixin
   public disconnectedCallback(): void {
     OeResizeObserver.instance.unobserve(this.canvas);
+
+    // because the resize observer is disconnected when the spectrogram is
+    // removed from the DOM, the unit converter value will still have the old
+    // spectrogram canvas size after it is removed from the DOM
+    // this means that any elements that depend on the size of the spectrogram
+    // component e.g. axes, indicators, etc. will still stay the same size
+    // to fix this, we emit a canvas size of zero after the component is removed
+    if (this.unitConverters.value) {
+      this.unitConverters.value.canvasSize.value = { width: 0, height: 0 };
+    }
+
     super.disconnectedCallback();
   }
 
diff --git a/src/components/verification-grid-settings/verification-grid-settings.fixture.ts b/src/components/verification-grid-settings/verification-grid-settings.fixture.ts
index e4247629..3eca7521 100644
--- a/src/components/verification-grid-settings/verification-grid-settings.fixture.ts
+++ b/src/components/verification-grid-settings/verification-grid-settings.fixture.ts
@@ -85,7 +85,7 @@ class TestPage {
 
   /** Returns the value of the verification grids `grid-size` attribute */
   public async verificationGridSize(): Promise<number> {
-    return (await getBrowserValue<VerificationGridComponent>(this.verificationGrid(), "gridSize")) as number;
+    return (await getBrowserValue<VerificationGridComponent>(this.verificationGrid(), "targetGridSize")) as number;
   }
 
   /** Returns the grid size shown by the grid size settings input */
diff --git a/src/components/verification-grid-settings/verification-grid-settings.ts b/src/components/verification-grid-settings/verification-grid-settings.ts
index 423c66ba..23afc3d9 100644
--- a/src/components/verification-grid-settings/verification-grid-settings.ts
+++ b/src/components/verification-grid-settings/verification-grid-settings.ts
@@ -66,7 +66,7 @@ export class VerificationGridSettingsComponent extends SignalWatcher(AbstractCom
       throw new Error("Could not find associated verification grid component");
     }
 
-    this.gridSize = this.verificationGrid.gridSize;
+    this.gridSize = this.verificationGrid.targetGridSize;
   }
 
   private handleGridSizeChange(event: ChangeEvent<HTMLInputElement>) {
@@ -78,7 +78,7 @@ export class VerificationGridSettingsComponent extends SignalWatcher(AbstractCom
     const inputValue = event.target.value;
     const newGridSize = Number(inputValue);
 
-    this.verificationGrid.gridSize = newGridSize;
+    this.verificationGrid.targetGridSize = newGridSize;
 
     this.updateGridSizeState();
   }
@@ -90,7 +90,7 @@ export class VerificationGridSettingsComponent extends SignalWatcher(AbstractCom
 
     return html`
       <sl-dropdown placement="top-start">
-        <sl-tooltip slot="trigger" content="Change the verification grid size">
+        <sl-tooltip slot="trigger" content="Change the verification grids target size">
           <button
             id="grid-size-trigger"
             @click="${this.updateGridSizeState}"
diff --git a/src/components/verification-grid-tile/css/style.css b/src/components/verification-grid-tile/css/style.css
index 70e87388..9993da2c 100644
--- a/src/components/verification-grid-tile/css/style.css
+++ b/src/components/verification-grid-tile/css/style.css
@@ -1,6 +1,18 @@
 :host {
   --decision-color: var(--oe-panel-color);
   --selected-border-size: 4px;
+
+  /*
+    It is okay to change the display property here because we do not expect
+    users to be using the oe-verification-grid-tile component because it is
+    an internal component that should only be used by us in the verification
+    grid component.
+
+    If we ever want to make this component publicly available, we should
+    consider removing the display property from the :host selector.
+  */
+  display: flex;
+  flex-direction: column;
 }
 
 .spectrogram-container {
@@ -15,9 +27,16 @@
   box-shadow: var(--oe-backdrop-shadow) var(--oe-panel-color);
   cursor: pointer;
   margin-bottom: 0;
-  min-width: 350px;
   padding: var(--selected-border-size);
   background-color: var(--oe-panel-color);
+  overflow: hidden;
+
+  /*
+    This minimum grid tile size is reflected in the dynamic grid layout helper
+    see src/helpers/controllers/dynamic-grid-size.ts#L40
+  */
+  min-width: 300px;
+  min-height: 300px;
 
   transition:
     border-color var(--oe-animation-time) ease-out,
@@ -70,8 +89,8 @@
   --progress-meter-rounding: var(--oe-border-rounding);
 
   display: flex;
-  height: var(--oe-spacing);
   width: 100%;
+  min-height: var(--oe-spacing);
   border: var(--oe-border-width) solid var(--oe-border-color);
   border-radius: var(--progress-meter-rounding);
 
diff --git a/src/components/verification-grid-tile/verification-grid-tile.ts b/src/components/verification-grid-tile/verification-grid-tile.ts
index 299f2e57..88438af2 100644
--- a/src/components/verification-grid-tile/verification-grid-tile.ts
+++ b/src/components/verification-grid-tile/verification-grid-tile.ts
@@ -23,6 +23,12 @@ import { hasCtrlLikeModifier } from "../../helpers/userAgent";
 import { ifDefined } from "lit/directives/if-defined.js";
 import verificationGridTileStyles from "./css/style.css?inline";
 
+export type OverflowEvent = CustomEvent<OverflowEventDetail>;
+
+interface OverflowEventDetail {
+  isOverlapping: boolean;
+}
+
 const shortcutOrder = "1234567890qwertyuiopasdfghjklzxcvbnm" as const;
 const shortcutTranslation: Record<string, string> = {
   1: "!",
@@ -99,8 +105,14 @@ export class VerificationGridTileComponent extends SignalWatcher(AbstractCompone
   @property({ attribute: false, type: Array })
   public requiredTags!: Tag[];
 
+  @property({ attribute: false, type: Boolean })
+  public isOverlapping = false;
+
   @query("oe-spectrogram")
-  private spectrogram?: SpectrogramComponent;
+  private spectrogram!: SpectrogramComponent;
+
+  @query("#slot-wrapper")
+  private slotWrapper!: HTMLDivElement;
 
   @query("#contents-wrapper")
   private contentsWrapper!: HTMLDivElement;
@@ -112,6 +124,7 @@ export class VerificationGridTileComponent extends SignalWatcher(AbstractCompone
 
   public loaded = false;
   private shortcuts: string[] = [];
+  private intersectionObserver!: IntersectionObserver;
 
   public connectedCallback(): void {
     super.connectedCallback();
@@ -128,6 +141,8 @@ export class VerificationGridTileComponent extends SignalWatcher(AbstractCompone
 
     this.contentsWrapper.removeEventListener<any>(SpectrogramComponent.playEventName, this.playHandler);
 
+    this.intersectionObserver.disconnect();
+
     super.disconnectedCallback();
   }
 
@@ -140,6 +155,23 @@ export class VerificationGridTileComponent extends SignalWatcher(AbstractCompone
 
     this.spectrogram.addEventListener("loading", this.loadingHandler);
     this.spectrogram.addEventListener("loaded", this.loadedHandler);
+
+    this.intersectionObserver = new IntersectionObserver((entries) => this.handleIntersection(entries), {
+      root: this,
+      // a threshold of zero indicates that we should trigger the callback if
+      // any part of the observed elements overflow the component
+      threshold: 0,
+    });
+
+    // we observe the slot wrapper because it has user defined content, meaning
+    // that it can overflow in any way possible
+    // we want to detect when content overflows the tile so that we can try a
+    // different grid size
+    //
+    // we observe the content wrapper because it can overflow when the
+    // spectrograms minimum height/width is reached
+    this.intersectionObserver.observe(this.slotWrapper);
+    this.intersectionObserver.observe(this.contentsWrapper);
   }
 
   // TODO: check if the model has updated, and conditionally change the spectrograms src
@@ -174,6 +206,20 @@ export class VerificationGridTileComponent extends SignalWatcher(AbstractCompone
     this.requestUpdate();
   }
 
+  private handleIntersection(entries: IntersectionObserverEntry[]): void {
+    const hasOverlapContent = entries.some((entry) => entry.intersectionRatio < 1);
+
+    this.isOverlapping = hasOverlapContent;
+
+    const overlapEvent = new CustomEvent<OverflowEventDetail>("overlap", {
+      detail: {
+        isOverlapping: hasOverlapContent,
+      },
+      bubbles: true,
+    });
+    this.dispatchEvent(overlapEvent);
+  }
+
   private handlePlay(event: CustomEvent<IPlayEvent>): void {
     if (!this.selected && event.detail.keyboardShortcut) {
       event.preventDefault();
@@ -297,14 +343,14 @@ export class VerificationGridTileComponent extends SignalWatcher(AbstractCompone
         id="contents-wrapper"
         @pointerdown="${this.dispatchSelectedEvent}"
         @keydown="${this.handleFocusedKeyDown}"
-        class="tile-container ${tileClasses}"
+        class="tile-container vertically-fill ${tileClasses}"
         part="tile-container"
         role="button"
         tabindex="0"
         aria-hidden="${this.hidden}"
       >
         ${this.keyboardShortcutTemplate()}
-        <figure class="spectrogram-container ${figureClasses}">
+        <figure class="spectrogram-container vertically-fill ${figureClasses}">
           <div class="figure-head">
             <figcaption class="tag-label">
               <sl-tooltip content="This item was tagged as '${tagText}' in your data source" placement="bottom-start">
@@ -319,6 +365,7 @@ export class VerificationGridTileComponent extends SignalWatcher(AbstractCompone
           </div>
 
           <oe-axes
+            class="vertically-fill"
             ?x-title-visible="${watch(this.settings.showAxes)}"
             ?y-title-visible="${watch(this.settings.showAxes)}"
             ?x-axis="${watch(this.settings.showAxes)}"
@@ -326,14 +373,16 @@ export class VerificationGridTileComponent extends SignalWatcher(AbstractCompone
             ?x-grid="${watch(this.settings.showAxes)}"
             ?y-grid="${watch(this.settings.showAxes)}"
           >
-            <oe-indicator>
-              <oe-spectrogram id="spectrogram" color-map="audacity"></oe-spectrogram>
+            <oe-indicator class="vertically-fill">
+              <oe-spectrogram id="spectrogram" class="vertically-fill" color-map="audacity"></oe-spectrogram>
             </oe-indicator>
           </oe-axes>
 
           <div class="progress-meter">${this.meterSegmentsTemplate()}</div>
 
-          <slot></slot>
+          <div id="slot-wrapper">
+            <slot></slot>
+          </div>
         </figure>
       </div>
     `;
diff --git a/src/components/verification-grid/css/style.css b/src/components/verification-grid/css/style.css
index d1217527..1a378803 100644
--- a/src/components/verification-grid/css/style.css
+++ b/src/components/verification-grid/css/style.css
@@ -1,3 +1,8 @@
+:host {
+  display: block;
+  height: 100dvh;
+}
+
 #highlight-box {
   position: absolute;
   display: none;
@@ -28,31 +33,36 @@
   padding: var(--oe-spacing);
 }
 
+/* The container that contains both decision buttons and grid tiles */
 .verification-container {
   display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  align-items: stretch;
-  background-color: var(--oe-background-color);
+  flex-direction: column;
   height: 100%;
+  background-color: var(--oe-background-color);
 }
 
+/* The verification grid that contains verification grid tiles */
 .verification-grid {
-  display: flex;
-  flex-wrap: wrap;
-  flex-grow: 1;
-  flex-basis: 100%;
+  --columns: 0;
+  --rows: 0;
+
+  display: grid;
+  width: 100%;
   user-select: none;
-  justify-content: center;
-  align-items: stretch;
+  flex: 1 1;
 
   /*
-    We apply normal padding to the verification grid so that it is consistent
-    with the rest of the client, and so that the interactivity area is extended
-    slightly beyond the edge of the verification grids content
+    We set the minimum height to zero so that the verification grid flex item
+    can shrink past its content size.
+    If we do not set the property, the flex item will automatically set its
+    minimum height to the summed height of the grid tiles.
+    By overriding the minimum height, the grid tiles will shrink to fit in the
+    verification grid.
   */
-  padding-top: var(--oe-spacing);
-  padding-bottom: var(--oe-spacing);
+  min-height: 0px;
+
+  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
+  grid-template-rows: repeat(var(--rows), minmax(0, 1fr));
 
   /*
     We use a grid gap property instead of adding margin to the grid tile
@@ -70,7 +80,7 @@
   position: relative;
   width: 80%;
   height: min-content;
-  align-self: end;
+  align-self: center;
 
   display: flex;
   flex-wrap: wrap;
@@ -110,6 +120,7 @@
 .progress-bar {
   display: flex;
   flex: 1 1 100%;
+  height: min-content;
   align-items: center;
 
   oe-progress-bar {
diff --git a/src/components/verification-grid/verification-grid.ts b/src/components/verification-grid/verification-grid.ts
index fce63054..156a17b3 100644
--- a/src/components/verification-grid/verification-grid.ts
+++ b/src/components/verification-grid/verification-grid.ts
@@ -1,7 +1,7 @@
 import { customElement, property, query, queryAll, queryAssignedElements, state } from "lit/decorators.js";
 import { AbstractComponent } from "../../mixins/abstractComponent";
 import { html, LitElement, nothing, PropertyValueMap, PropertyValues, TemplateResult, unsafeCSS } from "lit";
-import { VerificationGridTileComponent } from "../verification-grid-tile/verification-grid-tile";
+import { OverflowEvent, VerificationGridTileComponent } from "../verification-grid-tile/verification-grid-tile";
 import { DecisionComponent, DecisionComponentUnion, DecisionEvent } from "../decision/decision";
 import { VerificationHelpDialogComponent } from "./help-dialog";
 import { callbackConverter } from "../../helpers/attributes";
@@ -24,6 +24,7 @@ import { when } from "lit/directives/when.js";
 import { hasCtrlLikeModifier } from "../../helpers/userAgent";
 import { decisionColor } from "../../services/colors";
 import { ifDefined } from "lit/directives/if-defined.js";
+import { DynamicGridSizeController, GridShape } from "../../helpers/controllers/dynamic-grid-sizes";
 import verificationGridStyles from "./css/style.css?inline";
 
 export type SelectionObserverType = "desktop" | "tablet" | "default";
@@ -118,7 +119,7 @@ export class VerificationGridComponent extends AbstractComponent(LitElement) {
 
   /** The number of items to display in a single grid */
   @property({ attribute: "grid-size", type: Number, reflect: true })
-  public gridSize = 8;
+  public targetGridSize = 10;
 
   /**
    * The selection behavior of the verification grid
@@ -168,6 +169,31 @@ export class VerificationGridComponent extends AbstractComponent(LitElement) {
   @state()
   public currentPage: SubjectWrapper[] = [];
 
+  @state()
+  public columns = this.targetGridSize;
+
+  @state()
+  public rows = 1;
+
+  public get gridShape(): GridShape {
+    return { columns: this.columns, rows: this.rows };
+  }
+
+  /** A count of the number of tiles shown in the grid */
+  public get populatedTileCount(): number {
+    // we want to respect the users grid size preference if it fits
+    // however, if the requested grid size does not fit, we will use the
+    // computed grid size which is the maximum number of tiles that we could
+    // fit on the page
+    const gridSize = this.rows * this.columns;
+    return Math.min(gridSize, this.targetGridSize);
+  }
+
+  /** A count of the number of tiles currently visible on the screen */
+  private get effectivePageSize(): number {
+    return this.populatedTileCount - this.hiddenTiles;
+  }
+
   public get pagedItems(): number {
     return this.subjectHistory.length;
   }
@@ -180,10 +206,8 @@ export class VerificationGridComponent extends AbstractComponent(LitElement) {
   private keydownHandler = this.handleKeyDown.bind(this);
   private keyupHandler = this.handleKeyUp.bind(this);
   private blurHandler = this.handleWindowBlur.bind(this);
-  private intersectionHandler = this.handleIntersection.bind(this);
   private selectionHandler = this.handleSelection.bind(this);
   private decisionHandler = this.handleDecision.bind(this);
-  private intersectionObserver = new IntersectionObserver(this.intersectionHandler);
 
   // the subject history contains all the subjects that have decisions applied
   // to them, while the verification buffer contains all the subjects that have
@@ -198,6 +222,9 @@ export class VerificationGridComponent extends AbstractComponent(LitElement) {
   private showingSelectionShortcuts = false;
   private selectionHead: number | null = null;
   private doneRenderBoxInit = false;
+  private anyOverlap = signal<boolean>(false);
+  private gridController?: DynamicGridSizeController<HTMLDivElement>;
+  private paginationFetcher?: GridPageFetcher;
   private highlight: HighlightSelection = {
     start: { x: 0, y: 0 },
     current: { x: 0, y: 0 },
@@ -205,13 +232,6 @@ export class VerificationGridComponent extends AbstractComponent(LitElement) {
     elements: [],
   };
 
-  private paginationFetcher?: GridPageFetcher;
-
-  /** A count of the number of tiles currently visible on the screen */
-  private get effectivePageSize(): number {
-    return this.gridSize - this.hiddenTiles;
-  }
-
   public connectedCallback(): void {
     super.connectedCallback();
     document.addEventListener("keydown", this.keydownHandler);
@@ -220,7 +240,6 @@ export class VerificationGridComponent extends AbstractComponent(LitElement) {
   }
 
   public disconnectedCallback(): void {
-    this.intersectionObserver.disconnect();
     document.removeEventListener("keydown", this.keydownHandler);
     document.removeEventListener("keyup", this.keyupHandler);
     window.removeEventListener("blur", this.blurHandler);
@@ -251,32 +270,47 @@ export class VerificationGridComponent extends AbstractComponent(LitElement) {
   public firstUpdated(): void {
     this.gridContainer.addEventListener<any>("selected", this.selectionHandler);
     this.decisionsContainer.addEventListener<any>("decision", this.decisionHandler);
+
+    // if the user has explicitly set a grid size through the `grid-size`
+    // attribute, we should use that grid size
+    // however, if the verification grid does not have a `grid-size` attribute
+    // then we look at our grid size breakpoints to determine the grid size
+    // that will fit the best on the screen
+    if (!this.targetGridSize) {
+      const targetSize = this.defaultGridSize();
+      this.targetGridSize = targetSize;
+    }
   }
 
   protected willUpdate(change: PropertyValues<this>): void {
-    // whenever the gridSize property updates, we check that the new value
+    // whenever the targetGridSize property updates, we check that the new value
     // is a finite, positive number. If it is not, then we cancel the change
     // and revert to the old value
-    if (change.has("gridSize")) {
-      const oldGridSize = change.get("gridSize") as number;
-      const newGridSize = this.gridSize;
+    if (change.has("targetGridSize")) {
+      const oldGridSize = change.get("targetGridSize") as number;
+      const newGridSize = this.targetGridSize;
 
       // we use isFinite here to check that the value is not NaN, and that
       // values such as Infinity are not considered as a valid grid size
       if (!isFinite(newGridSize) || newGridSize <= 0) {
-        this.gridSize = oldGridSize;
-        console.error("New grid size value could not be converted to a number");
+        this.targetGridSize = oldGridSize;
+        console.error(`New grid size "${newGridSize}" could not be converted to a finite number`);
       }
     }
   }
 
   protected async updated(change: PropertyValueMap<this>): Promise<void> {
+    if (this.gridContainer && change.has("targetGridSize")) {
+      this.gridController ??= new DynamicGridSizeController(this.gridContainer, this, this.anyOverlap);
+      this.gridController.setTarget(this.targetGridSize);
+    }
+
     const tileInvalidationKeys: (keyof this)[] = ["selectionBehavior"];
     // gridSize is a part of source invalidation because if the grid size
     // increases, there will be verification grid tiles without any source
     // additionally, if the grid size is decreased, we want the "currentPage"
     // of sources to update / remove un-needed items
-    const sourceInvalidationKeys: (keyof this)[] = ["getPage", "gridSize"];
+    const sourceInvalidationKeys: (keyof this)[] = ["getPage", "targetGridSize", "columns", "rows"];
 
     // tile invalidations cause the functionality of the tiles to change
     // however, they do not cause the spectrograms or the template to render
@@ -292,6 +326,20 @@ export class VerificationGridComponent extends AbstractComponent(LitElement) {
     }
   }
 
+  private defaultGridSize(): number {
+    const screenSize = window.screen;
+
+    // for mobile devices, we want to show a single tile
+    // for anything that is larger than a phone, we want to target ten tiles
+    // if ten tiles will not fit on the screen, the grid will automatically
+    // select the largest grid size that will fit
+    if (screenSize.width <= 720) {
+      return 1;
+    } else {
+      return 10;
+    }
+  }
+
   private handleTileInvalidation(): void {
     // if the user doesn't explicitly define a "selection-behavior" attribute
     // then we will infer the selection behavior based on the device type
@@ -327,7 +375,7 @@ export class VerificationGridComponent extends AbstractComponent(LitElement) {
 
     if (this.getPage) {
       this.paginationFetcher = new GridPageFetcher(this.getPage);
-      this.currentPage = await this.paginationFetcher.getItems(this.gridSize);
+      this.currentPage = await this.paginationFetcher.getItems(this.populatedTileCount);
     }
   }
 
@@ -471,6 +519,22 @@ export class VerificationGridComponent extends AbstractComponent(LitElement) {
     this.updateInjector();
   }
 
+  private handleTileOverlap(event: OverflowEvent): void {
+    if (event.detail.isOverlapping === this.anyOverlap.value) {
+      return;
+    }
+
+    const gridTiles = this.gridTiles;
+    for (const tile of gridTiles) {
+      if (tile.isOverlapping) {
+        this.anyOverlap.value = true;
+        return;
+      }
+    }
+
+    this.anyOverlap.value = false;
+  }
+
   //#endregion
 
   //#region SelectionHandlers
@@ -502,24 +566,6 @@ export class VerificationGridComponent extends AbstractComponent(LitElement) {
     this.showingSelectionShortcuts = false;
   }
 
-  // TODO: The intersection observer has been disabled because its functionality
-  // is buggy when the verification grid is larger than the screen size
-  // see: https://github.com/ecoacoustics/web-components/issues/146
-  // see: https://github.com/ecoacoustics/web-components/issues/147
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  private handleIntersection(_entries: IntersectionObserverEntry[]): void {
-    // for (const entry of entries) {
-    //   if (entry.intersectionRatio < 1) {
-    //     // at the very minimum, we always want one grid tile showing
-    //     // even if this will cause some items to go off the screen
-    //     const newProposedHiddenTiles = this.hiddenTiles + 1;
-    //     if (newProposedHiddenTiles < this.gridSize) {
-    //       this.hideGridItems(newProposedHiddenTiles);
-    //     }
-    //   }
-    // }
-  }
-
   private handleSelection(selectionEvent: SelectionEvent): void {
     if (!this.canSubSelect()) {
       return;
@@ -616,7 +662,7 @@ export class VerificationGridComponent extends AbstractComponent(LitElement) {
     // we check that the help dialog is not open so that the user doesn't
     // accidentally create a sub-selection (e.g. through keyboard shortcuts)
     // when they can't actually see the grid items
-    return this.gridSize > 1 && !this.isHelpDialogOpen();
+    return this.populatedTileCount > 1 && !this.isHelpDialogOpen();
   }
 
   private isMobileDevice(): boolean {
@@ -756,8 +802,6 @@ export class VerificationGridComponent extends AbstractComponent(LitElement) {
       return;
     }
 
-    console.log("stop highlight");
-
     // TODO: make this better
     element.style.width = "0px";
     element.style.height = "0px";
@@ -772,7 +816,7 @@ export class VerificationGridComponent extends AbstractComponent(LitElement) {
 
   private async handlePreviousPageClick(): Promise<void> {
     if (this.canNavigatePrevious()) {
-      this.historyHead += this.gridSize;
+      this.historyHead += this.populatedTileCount;
       await this.renderHistory(this.historyHead);
     }
   }
@@ -785,14 +829,14 @@ export class VerificationGridComponent extends AbstractComponent(LitElement) {
 
   private async pageForwardHistory(): Promise<void> {
     if (this.canNavigateNext()) {
-      this.historyHead -= this.gridSize;
+      this.historyHead -= this.populatedTileCount;
       await this.renderHistory(this.historyHead);
     }
   }
 
   private async renderHistory(historyOffset: number) {
     const decisionStart = Math.max(0, this.subjectHistory.length - historyOffset);
-    const decisionEnd = Math.min(this.subjectHistory.length, decisionStart + this.gridSize);
+    const decisionEnd = Math.min(this.subjectHistory.length, decisionStart + this.populatedTileCount);
     const decisionHistory = this.subjectHistory.slice(decisionStart, decisionEnd);
 
     this.historyMode();
@@ -863,7 +907,7 @@ export class VerificationGridComponent extends AbstractComponent(LitElement) {
   }
 
   private canNavigateNext(): boolean {
-    return this.historyHead > this.gridSize;
+    return this.historyHead > this.populatedTileCount;
   }
 
   //#endregion
@@ -1120,7 +1164,7 @@ export class VerificationGridComponent extends AbstractComponent(LitElement) {
   private decisionPromptTemplate() {
     const subSelection = this.currentSubSelection;
     const hasSubSelection = subSelection.length > 0;
-    const hasMultipleTiles = this.gridSize > 1;
+    const hasMultipleTiles = this.populatedTileCount > 1;
 
     if (this.hasClassificationTask() && this.hasVerificationTask()) {
       return this.mixedTaskPromptTemplate(hasMultipleTiles, hasSubSelection);
@@ -1195,10 +1239,12 @@ export class VerificationGridComponent extends AbstractComponent(LitElement) {
       <div class="verification-container">
         <div
           id="grid-container"
+          class="verification-grid"
+          style="--columns: ${this.columns}; --rows: ${this.rows};"
           @pointerdown="${this.renderHighlightBox}"
           @pointerup="${this.hideHighlightBox}"
           @pointermove="${this.resizeHighlightBox}"
-          class="verification-grid"
+          @overlap="${this.handleTileOverlap}"
         >
           ${when(
             this.currentPage.length === 0,
@@ -1208,6 +1254,7 @@ export class VerificationGridComponent extends AbstractComponent(LitElement) {
                 this.currentPage,
                 (subject: SubjectWrapper, i: number) => html`
                   <oe-verification-grid-tile
+                    class="grid-tile"
                     @loaded="${this.handleSpectrogramLoaded}"
                     .requiredTags="${this.tilesRequiredTags(subject)}"
                     .model="${subject}"
@@ -1222,7 +1269,7 @@ export class VerificationGridComponent extends AbstractComponent(LitElement) {
         </div>
 
         <div class="controls-container">
-          <span class="decision-controls-left">
+          <span id="element-container" class="decision-controls-left">
             <oe-verification-grid-settings></oe-verification-grid-settings>
 
             <button
@@ -1249,7 +1296,7 @@ export class VerificationGridComponent extends AbstractComponent(LitElement) {
               ${this.hasDecisionElements() ? this.decisionPromptTemplate() : this.noDecisionsTemplate()}
             </h2>
             <div id="decisions-container" class="decision-control-actions">
-              <slot @slotchange="${this.handleSlotChange}"></slot>
+              <slot @slotchange="${() => this.handleSlotChange()}"></slot>
               ${this.skipDecisionTemplate()}
             </div>
           </span>
@@ -1259,7 +1306,7 @@ export class VerificationGridComponent extends AbstractComponent(LitElement) {
           </span>
 
           <div class="progress-bar">
-            <sl-tooltip content="${this.gridSize > 1 ? "Previous Page" : "Previous"}">
+            <sl-tooltip content="${this.targetGridSize > 1 ? "Previous Page" : "Previous"}">
               <button
                 data-testid="previous-page-button"
                 class="previous-page-button oe-btn-secondary"
@@ -1270,7 +1317,7 @@ export class VerificationGridComponent extends AbstractComponent(LitElement) {
               </button>
             </sl-tooltip>
 
-            <sl-tooltip content="${this.gridSize > 1 ? "Next Page" : "Next"}">
+            <sl-tooltip content="${this.targetGridSize > 1 ? "Next Page" : "Next"}">
               <button
                 data-testid="next-page-button"
                 class="next-page-button oe-btn-secondary"
diff --git a/src/helpers/controllers/dynamic-grid-sizes.ts b/src/helpers/controllers/dynamic-grid-sizes.ts
new file mode 100644
index 00000000..ef0a73d1
--- /dev/null
+++ b/src/helpers/controllers/dynamic-grid-sizes.ts
@@ -0,0 +1,269 @@
+import { Signal } from "@lit-labs/preact-signals";
+import { VerificationGridComponent } from "../../components/verification-grid/verification-grid";
+import { Size } from "../../models/rendering";
+import { Pixel } from "../../models/unitConverters";
+
+export interface GridShape {
+  rows: number;
+  columns: number;
+}
+
+interface GridShapeWithDistance extends GridShape {
+  distance: number;
+}
+
+export class DynamicGridSizeController<Container extends HTMLElement> {
+  public constructor(container: Container, targetElement: VerificationGridComponent, isOverlapping: Signal<boolean>) {
+    this.targetElement = targetElement;
+    this.anyOverlap = isOverlapping;
+
+    const resizeObserver = new ResizeObserver((size: ResizeObserverEntry[]) => {
+      if (!this.target) return;
+
+      // because we know that this resize observer will only ever be used with
+      // one element, we can safely assume that the first element in the array
+      // is the container element
+      const container = size[0];
+      this.handleResize(container);
+    });
+    resizeObserver.observe(container);
+
+    this.anyOverlap.subscribe((value: boolean) => {
+      if (value) {
+        this.handleIntersection();
+      }
+    });
+  }
+
+  private targetElement: VerificationGridComponent;
+  private candidateShapes: GridShape[] = [];
+  private containerSize: Size = { width: 0, height: 0 };
+
+  // this minimum grid cell size is enforced by the grid tiles css
+  // see: src/components/verification-grid-tile/verification-grid-tile/style.css#L30
+  private minimumGridCellSize: Size = { width: 300, height: 300 };
+  private anyOverlap: Signal<boolean>;
+  private target = 0;
+
+  /**
+   * Generates a list of candidates for the target and applies the most optimal
+   * candidate.
+   *
+   * If the candidate does not fit, the intersection handler will be called to
+   * try the next candidate.
+   */
+  public setTarget(target: number): void {
+    this.target = target;
+    this.candidateShapes = this.generateSearchTargetBuffer(target);
+    this.applyNextCandidateShape();
+  }
+
+  /**
+   * Re-generates possible candidates for the new container size
+   * and applies the most optimal candidate.
+   */
+  private handleResize(container: ResizeObserverEntry): void {
+    this.containerSize = container.contentRect;
+    this.setTarget(this.target);
+  }
+
+  private handleIntersection(): void {
+    this.applyNextCandidateShape();
+  }
+
+  private applyNextCandidateShape(): void {
+    const nextCandidate = this.nextCandidateShape();
+    console.warn("applying next candidate", nextCandidate);
+    this.setGridShape(nextCandidate);
+  }
+
+  /**
+   * @returns
+   * The first candidate shape that is viable.
+   * Viability means that we have determined that it will fit in the container
+   * and that it hasn't overflowed in the past.
+   */
+  private nextCandidateShape(): GridShape {
+    const nextBufferCandidate = this.candidateShapes.shift();
+    if (nextBufferCandidate) {
+      return nextBufferCandidate;
+    }
+
+    // if we run out of candidates we default to a 1x1 grid
+    // this can occur if 1 1x1 grid overflows and we have no other candidates
+    // in this case, we want to fall back to a 1x1 grid as "least bad" option
+    return { columns: 1, rows: 1 };
+  }
+
+  // because we might overflow above and below the target, we generate possible
+  // grid shapes that are within a certain range of the target
+  private generateSearchTargetBuffer(target: number): GridShape[] {
+    // because one is the minimum grid size, we know that if one doesn't fit
+    // then nothing will fit.
+    // therefore, we do not have to worry about alternative candidate shapes for
+    // a grid size of one, and we can short circuit generating candidates
+    if (target === 1) {
+      return [{ columns: 1, rows: 1 }];
+    }
+
+    const candidateTargets: GridShape[] = [];
+
+    candidateTargets.push(
+      ...this.candidateShapesForTarget(target),
+      ...this.candidateShapesForTarget(target + 1),
+      ...this.candidateShapesForTarget(target + 2),
+    );
+
+    // find all candidates all down to one
+    for (let lowScanTarget = target - 1; lowScanTarget > 0; lowScanTarget--) {
+      candidateTargets.push(...this.candidateShapesForTarget(lowScanTarget));
+    }
+
+    return this.sortByEligibility(candidateTargets);
+  }
+
+  /**
+   * Returns all the possible grid shapes that can be used to create a grid of
+   * the target size.
+   * This function does not check if the grid shape will fit in the container.
+   */
+  private candidateShapesForTarget(target: number): GridShape[] {
+    const candidateShapes: GridShape[] = [];
+
+    // find all the factors of the target grid size
+    for (let i = 1; i <= target; i++) {
+      const isFactor = target % i === 0;
+      if (isFactor) {
+        const columns = i;
+        const rows = target / i;
+
+        // we have a minimum cell size that a candidate needs to meet
+        // because users can provide a custom template of a variable size
+        // this function cannot guarantee that the grid will fit in the
+        // container.
+        // however, we keep this condition in so that we can filter out
+        // candidates that will definitely not fit
+        const meetsMinimumSize = this.validateShapeCellSize({ columns, rows });
+        if (meetsMinimumSize) {
+          candidateShapes.push({ columns, rows });
+        }
+      }
+    }
+
+    return candidateShapes;
+  }
+
+  /**
+   * Sorts the grid shape candidates by two conditions:
+   * 1. The distance from the target grid size
+   * 2. The similarity between the grid aspect ratio and the container aspect ratio
+   */
+  private sortByEligibility(shapes: GridShape[]): GridShape[] {
+    const containerArea = this.containerSize.width * this.containerSize.height;
+    const containerAspectRatio = this.containerSize.width / this.containerSize.height;
+    const desiredGridSize = this.target;
+    const desiredArea = containerArea / desiredGridSize;
+    const calculate = (shape: GridShape) => {
+      const proposedRatio = shape.columns / shape.rows;
+      const proposedSize = Math.min(this.target, shape.columns * shape.rows);
+
+      const proposedArea = containerArea / (shape.columns * shape.rows);
+
+      const distance = DynamicGridSizeController.cosineDistance(
+        [proposedRatio, proposedSize, proposedArea],
+        [containerAspectRatio, desiredGridSize, desiredArea],
+      );
+
+      return {
+        distance,
+        rows: shape.rows,
+        columns: shape.columns,
+        // proposedSize,
+        // proposedRatio,
+        // proposedArea,
+        // containerAspectRatio,
+      };
+    };
+
+    const result = shapes.map(calculate).sort(DynamicGridSizeController.closestDistance);
+
+    // console.info("sorted candidates");
+    // console.table(result);
+
+    return result;
+  }
+
+  private static closestDistance = (a: GridShapeWithDistance, b: GridShapeWithDistance) => a.distance - b.distance;
+
+  private static cosineDistance(vectorA: number[], vectorB: number[]): number {
+    // Check if vectors are of the same length
+    if (vectorA.length !== vectorB.length) {
+      throw new Error("Vectors must be of the same length");
+    }
+
+    // Calculate dot product
+    let dotProduct = 0;
+    let magnitudeA = 0;
+    let magnitudeB = 0;
+
+    for (let i = 0; i < vectorA.length; i++) {
+      dotProduct += vectorA[i] * vectorB[i];
+      magnitudeA += vectorA[i] * vectorA[i];
+      magnitudeB += vectorB[i] * vectorB[i];
+    }
+
+    // Calculate magnitudes
+    magnitudeA = Math.sqrt(magnitudeA);
+    magnitudeB = Math.sqrt(magnitudeB);
+
+    if (magnitudeA === 0 || magnitudeB === 0) {
+      throw new Error("Vector magnitude cannot be zero");
+    }
+
+    // Calculate cosine similarity
+    const cosineSimilarity = dotProduct / (magnitudeA * magnitudeB);
+
+    // Convert cosine similarity to cosine distance
+    const cosineDistance = 1 - cosineSimilarity;
+
+    return cosineDistance;
+  }
+
+  private setGridShape(shape: GridShape): void {
+    this.targetElement.columns = shape.columns;
+    this.targetElement.rows = shape.rows;
+  }
+
+  /**
+   * @returns
+   * A boolean that represents if the cells in the proposed grid shape meet
+   * the minimum cell size requirements.
+   */
+  private validateShapeCellSize(gridShape: GridShape): boolean {
+    const minimumTileWidth: Pixel = this.minimumGridCellSize.width;
+    const minimumTileHeight: Pixel = this.minimumGridCellSize.height;
+
+    const proposedTileSize = this.gridCellSizeForShape(gridShape);
+
+    const meetsMinimumWidth = proposedTileSize.width >= minimumTileWidth;
+    const meetsMinimumHeight = proposedTileSize.height >= minimumTileHeight;
+
+    return meetsMinimumHeight && meetsMinimumWidth;
+  }
+
+  /**
+   * @returns
+   * A size object that represents the size of a cell in a proposed grid shape
+   */
+  private gridCellSizeForShape(gridShape: GridShape): Size {
+    const usableContainerSize: Size = {
+      width: this.containerSize.width,
+      height: this.containerSize.height,
+    };
+
+    const width = usableContainerSize.width / gridShape.columns;
+    const height = usableContainerSize.height / gridShape.rows;
+
+    return { width, height };
+  }
+}
diff --git a/src/helpers/themes/theming.css b/src/helpers/themes/theming.css
index f07fdd7a..a03a25dd 100644
--- a/src/helpers/themes/theming.css
+++ b/src/helpers/themes/theming.css
@@ -40,7 +40,6 @@
   --oe-border-color: hsl(var(--oe-theme-hue), var(--oe-theme-saturation), calc(var(--oe-theme-lightness) - 10%));
   --oe-border-width: 1px;
 
- 
   --oe-backdrop-shadow: 3px 3px 4px;
   --oe-font-family: "Roboto", sans-serif;
   --oe-font-size: 11px;
@@ -351,6 +350,13 @@ button {
   border-radius: var(--oe-border-rounding);
 }
 
+.vertically-fill {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1;
+  min-height: 0px;
+}
+
 @keyframes fade-in {
   0% {
     opacity: 0;
diff --git a/src/models/unitConverters.ts b/src/models/unitConverters.ts
index 9887a74c..7455fa49 100644
--- a/src/models/unitConverters.ts
+++ b/src/models/unitConverters.ts
@@ -10,6 +10,12 @@ export type Sample = number;
 export type Pixel = number;
 export type EmUnit = number;
 
+/**
+ * A value that is bounded from [0, 1]
+ * A unit intervals can be used to represent percentages in decimal form
+ */
+export type UnitInterval = number;
+
 export type ScaleDomain<T extends number> = [min: T, min: T];
 export type ScaleRange<T extends number> = [min: T, max: T];
 
diff --git a/src/tests/__snapshots__/single-verification-grid-grid-sizes-desktop-should-look-correct-with-slot-content/single-verification-grid-grid-sizes-desktop-should-look-correct-with-slot-content-1.png b/src/tests/__snapshots__/single-verification-grid-grid-sizes-desktop-should-look-correct-with-slot-content/single-verification-grid-grid-sizes-desktop-should-look-correct-with-slot-content-1.png
new file mode 100644
index 00000000..9dc16382
--- /dev/null
+++ b/src/tests/__snapshots__/single-verification-grid-grid-sizes-desktop-should-look-correct-with-slot-content/single-verification-grid-grid-sizes-desktop-should-look-correct-with-slot-content-1.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d24c6c8ee31061a7257f031692b11271a5d7d838e3c6815715c5c66aa7b4c662
+size 8801
diff --git a/src/tests/__snapshots__/single-verification-grid-grid-sizes-desktop-should-look-correct/single-verification-grid-grid-sizes-desktop-should-look-correct-1.png b/src/tests/__snapshots__/single-verification-grid-grid-sizes-desktop-should-look-correct/single-verification-grid-grid-sizes-desktop-should-look-correct-1.png
new file mode 100644
index 00000000..b1cdde9e
--- /dev/null
+++ b/src/tests/__snapshots__/single-verification-grid-grid-sizes-desktop-should-look-correct/single-verification-grid-grid-sizes-desktop-should-look-correct-1.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d7ce2bba0a9bb59182fc171a2cab71bb88e79ddae1d0aaf39a5ffd66510732a3
+size 8800
diff --git a/src/tests/__snapshots__/single-verification-grid-grid-sizes-landscape-tablet-should-look-correct-with-slot-content/single-verification-grid-grid-sizes-landscape-tablet-should-look-correct-with-slot-content-1.png b/src/tests/__snapshots__/single-verification-grid-grid-sizes-landscape-tablet-should-look-correct-with-slot-content/single-verification-grid-grid-sizes-landscape-tablet-should-look-correct-with-slot-content-1.png
new file mode 100644
index 00000000..7aa81656
--- /dev/null
+++ b/src/tests/__snapshots__/single-verification-grid-grid-sizes-landscape-tablet-should-look-correct-with-slot-content/single-verification-grid-grid-sizes-landscape-tablet-should-look-correct-with-slot-content-1.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:aded701a5f808c1e132d45c31486348d3218396efb0e2da2cad60ada607d5d52
+size 4094
diff --git a/src/tests/__snapshots__/single-verification-grid-grid-sizes-landscape-tablet-should-look-correct/single-verification-grid-grid-sizes-landscape-tablet-should-look-correct-1.png b/src/tests/__snapshots__/single-verification-grid-grid-sizes-landscape-tablet-should-look-correct/single-verification-grid-grid-sizes-landscape-tablet-should-look-correct-1.png
new file mode 100644
index 00000000..7aa81656
--- /dev/null
+++ b/src/tests/__snapshots__/single-verification-grid-grid-sizes-landscape-tablet-should-look-correct/single-verification-grid-grid-sizes-landscape-tablet-should-look-correct-1.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:aded701a5f808c1e132d45c31486348d3218396efb0e2da2cad60ada607d5d52
+size 4094
diff --git a/src/tests/__snapshots__/single-verification-grid-grid-sizes-laptop-should-look-correct-with-slot-content/single-verification-grid-grid-sizes-laptop-should-look-correct-with-slot-content-1.png b/src/tests/__snapshots__/single-verification-grid-grid-sizes-laptop-should-look-correct-with-slot-content/single-verification-grid-grid-sizes-laptop-should-look-correct-with-slot-content-1.png
new file mode 100644
index 00000000..d3b3ecb7
--- /dev/null
+++ b/src/tests/__snapshots__/single-verification-grid-grid-sizes-laptop-should-look-correct-with-slot-content/single-verification-grid-grid-sizes-laptop-should-look-correct-with-slot-content-1.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:033b6855b5c01c367378fe29fe6fe5f2fb8af1b8c6287de9451e4da111cbfaaf
+size 4971
diff --git a/src/tests/__snapshots__/single-verification-grid-grid-sizes-laptop-should-look-correct/single-verification-grid-grid-sizes-laptop-should-look-correct-1.png b/src/tests/__snapshots__/single-verification-grid-grid-sizes-laptop-should-look-correct/single-verification-grid-grid-sizes-laptop-should-look-correct-1.png
new file mode 100644
index 00000000..d3b3ecb7
--- /dev/null
+++ b/src/tests/__snapshots__/single-verification-grid-grid-sizes-laptop-should-look-correct/single-verification-grid-grid-sizes-laptop-should-look-correct-1.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:033b6855b5c01c367378fe29fe6fe5f2fb8af1b8c6287de9451e4da111cbfaaf
+size 4971
diff --git a/src/tests/__snapshots__/single-verification-grid-grid-sizes-mobile-should-look-correct-with-slot-content/single-verification-grid-grid-sizes-mobile-should-look-correct-with-slot-content-1.png b/src/tests/__snapshots__/single-verification-grid-grid-sizes-mobile-should-look-correct-with-slot-content/single-verification-grid-grid-sizes-mobile-should-look-correct-with-slot-content-1.png
new file mode 100644
index 00000000..7388eb68
--- /dev/null
+++ b/src/tests/__snapshots__/single-verification-grid-grid-sizes-mobile-should-look-correct-with-slot-content/single-verification-grid-grid-sizes-mobile-should-look-correct-with-slot-content-1.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3016ae4e5b764aa0d8fb024e19572333c692df06e27774fb64709b2890c4fd9c
+size 2901
diff --git a/src/tests/__snapshots__/single-verification-grid-grid-sizes-mobile-should-look-correct/single-verification-grid-grid-sizes-mobile-should-look-correct-1.png b/src/tests/__snapshots__/single-verification-grid-grid-sizes-mobile-should-look-correct/single-verification-grid-grid-sizes-mobile-should-look-correct-1.png
new file mode 100644
index 00000000..7388eb68
--- /dev/null
+++ b/src/tests/__snapshots__/single-verification-grid-grid-sizes-mobile-should-look-correct/single-verification-grid-grid-sizes-mobile-should-look-correct-1.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3016ae4e5b764aa0d8fb024e19572333c692df06e27774fb64709b2890c4fd9c
+size 2901
diff --git a/src/tests/__snapshots__/single-verification-grid-grid-sizes-portrait-tablet-should-look-correct-with-slot-content/single-verification-grid-grid-sizes-portrait-tablet-should-look-correct-with-slot-content-1.png b/src/tests/__snapshots__/single-verification-grid-grid-sizes-portrait-tablet-should-look-correct-with-slot-content/single-verification-grid-grid-sizes-portrait-tablet-should-look-correct-with-slot-content-1.png
new file mode 100644
index 00000000..df1bce5f
--- /dev/null
+++ b/src/tests/__snapshots__/single-verification-grid-grid-sizes-portrait-tablet-should-look-correct-with-slot-content/single-verification-grid-grid-sizes-portrait-tablet-should-look-correct-with-slot-content-1.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8896fe6d055ecf90b1fdb350de0207ff2b44e0926b9e352e97f88316db0c2a37
+size 4632
diff --git a/src/tests/__snapshots__/single-verification-grid-grid-sizes-portrait-tablet-should-look-correct/single-verification-grid-grid-sizes-portrait-tablet-should-look-correct-1.png b/src/tests/__snapshots__/single-verification-grid-grid-sizes-portrait-tablet-should-look-correct/single-verification-grid-grid-sizes-portrait-tablet-should-look-correct-1.png
new file mode 100644
index 00000000..c91882a5
--- /dev/null
+++ b/src/tests/__snapshots__/single-verification-grid-grid-sizes-portrait-tablet-should-look-correct/single-verification-grid-grid-sizes-portrait-tablet-should-look-correct-1.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:38d00b54bd99b545380cdee515c550663ec9572c15cd6d5becf463d74aa775a9
+size 4676
diff --git a/src/tests/axes-spectrogram/axes-spectrogram.e2e.fixture.ts b/src/tests/axes-spectrogram/axes-spectrogram.e2e.fixture.ts
index a997bdb7..779186d0 100644
--- a/src/tests/axes-spectrogram/axes-spectrogram.e2e.fixture.ts
+++ b/src/tests/axes-spectrogram/axes-spectrogram.e2e.fixture.ts
@@ -61,16 +61,16 @@ class TestPage {
   }
 
   public async xAxisStep(): Promise<number> {
-    const lastValue = await (await this.xAxisLabels()).at(-1)?.textContent();
-    const secondLastValue = await (await this.xAxisLabels()).at(-2)?.textContent();
-    const step = Number(lastValue) - Number(secondLastValue);
+    const firstValue = await (await this.xAxisLabels()).at(0)?.textContent();
+    const secondValue = await (await this.xAxisLabels()).at(1)?.textContent();
+    const step = Number(firstValue) - Number(secondValue);
     return Math.abs(step);
   }
 
   public async yAxisStep(): Promise<number> {
-    const lastValue = await (await this.yAxisLabels()).at(-1)?.textContent();
-    const secondLastValue = await (await this.yAxisLabels()).at(-2)?.textContent();
-    const step = Number(lastValue) - Number(secondLastValue);
+    const firstValue = await (await this.yAxisLabels()).at(0)?.textContent();
+    const secondValue = await (await this.yAxisLabels()).at(1)?.textContent();
+    const step = Number(firstValue) - Number(secondValue);
     return Math.abs(step);
   }
 
diff --git a/src/tests/axes-spectrogram/axes-spectrogram.e2e.spec.ts b/src/tests/axes-spectrogram/axes-spectrogram.e2e.spec.ts
index ce72c44d..c8e92f6d 100644
--- a/src/tests/axes-spectrogram/axes-spectrogram.e2e.spec.ts
+++ b/src/tests/axes-spectrogram/axes-spectrogram.e2e.spec.ts
@@ -20,39 +20,39 @@ test.describe("interactions between axes and spectrogram", () => {
     const testCases: SpectrogramSizeTest[] = [
       {
         spectrogramSize: { width: 1000, height: 1000 },
-        expectedXStep: 0.1,
-        expectedYStep: 0.5,
-        expectedXTickCount: 51,
-        expectedYTickCount: 23,
+        expectedXStep: 0.2,
+        expectedYStep: 0.2,
+        expectedXTickCount: 26,
+        expectedYTickCount: 56,
       },
       {
         spectrogramSize: { width: 500, height: 500 },
-        expectedXStep: 0.2,
-        expectedYStep: 1,
-        expectedXTickCount: 26,
-        expectedYTickCount: 12,
+        expectedXStep: 0.5,
+        expectedYStep: 0.5,
+        expectedXTickCount: 11,
+        expectedYTickCount: 23,
       },
       {
         spectrogramSize: { width: 1000, height: 500 },
-        expectedXStep: 0.1,
+        expectedXStep: 0.2,
         expectedYStep: 0.5,
-        expectedXTickCount: 51,
+        expectedXTickCount: 26,
         expectedYTickCount: 23,
       },
       {
         spectrogramSize: { width: 500, height: 1000 },
-        expectedXStep: 0.2,
-        expectedYStep: 1,
-        expectedXTickCount: 26,
-        expectedYTickCount: 12,
+        expectedXStep: 0.5,
+        expectedYStep: 0.2,
+        expectedXTickCount: 11,
+        expectedYTickCount: 56,
       },
       {
         spectrogramSize: { width: 100, height: 100 },
-        expectedXStep: 1,
+        expectedXStep: 2,
         expectedYStep: 2,
         // we expect four here because it should include the last value
         // even though it is not a part of the "nice interval"
-        expectedXTickCount: 6,
+        expectedXTickCount: 4,
         expectedYTickCount: 6,
       },
     ];
diff --git a/src/tests/helpers.ts b/src/tests/helpers.ts
index 2f6a5d17..96884e5a 100644
--- a/src/tests/helpers.ts
+++ b/src/tests/helpers.ts
@@ -6,25 +6,37 @@ import { expect } from "./assertions";
 import { Pixel } from "../models/unitConverters";
 import { CssVariable } from "../helpers/types/advancedTypes";
 
+export type DeviceMock = (page: Page) => Promise<void>;
+
+export const testBreakpoints = {
+  mobile: { width: 432, height: 960 },
+  tabletPortrait: { width: 768, height: 1024 },
+  tabletLandscape: { width: 1024, height: 768 },
+  laptop: { width: 1366, height: 768 },
+  desktop: { width: 1920, height: 1080 },
+} as const satisfies Record<string, Size>;
+
 export async function getElementSize<T extends HTMLElement>(element: T | Locator): Promise<Size> {
   const width = (await getBrowserValue<T>(element, "clientWidth")) as number;
   const height = (await getBrowserValue<T>(element, "clientHeight")) as number;
   return { width, height };
 }
 
+// because mobile devices emit different user agent hints, we have a
+// special function to mock a mobile device in test that is more
+// complex than just changing the screen size
 export async function changeToMobile(page: Page) {
-  const mobileSize: Size = { width: 320, height: 568 };
-  await page.setViewportSize(mobileSize);
+  const viewportMock = mockDeviceSize(testBreakpoints.mobile);
+  await viewportMock(page);
 }
 
-export async function changeToTablet(page: Page) {
-  const tabletSize: Size = { width: 768, height: 1024 };
-  await page.setViewportSize(tabletSize);
+export async function changeToDesktop(page: Page) {
+  const viewportMock = mockDeviceSize(testBreakpoints.desktop);
+  await viewportMock(page);
 }
 
-export async function changeToDesktop(page: Page) {
-  const desktopSize: Size = { width: 1920, height: 1080 };
-  await page.setViewportSize(desktopSize);
+export function mockDeviceSize(size: Size): DeviceMock {
+  return (page: Page) => page.setViewportSize(size);
 }
 
 export async function insertHtml(page: Page, html: string) {
diff --git a/src/tests/verification-grid/verification-grid.e2e.fixture.ts b/src/tests/verification-grid/verification-grid.e2e.fixture.ts
index 31bda12f..21a6c3fb 100644
--- a/src/tests/verification-grid/verification-grid.e2e.fixture.ts
+++ b/src/tests/verification-grid/verification-grid.e2e.fixture.ts
@@ -19,6 +19,7 @@ import {
   VerificationGridSettings,
 } from "../../components/verification-grid/verification-grid";
 import { Size } from "../../models/rendering";
+import { GridShape } from "../../helpers/controllers/dynamic-grid-sizes";
 import {
   AxesComponent,
   DataSourceComponent,
@@ -41,6 +42,7 @@ class TestPage {
   public constructor(public readonly page: Page) {}
 
   public gridComponent = () => this.page.locator("oe-verification-grid").first();
+  public gridContainer = () => this.page.locator("#grid-container").first();
   public dataSourceComponent = () => this.page.locator("oe-data-source").first();
   public gridTileComponents = () => this.page.locator("oe-verification-grid-tile").all();
   public indicatorComponents = () => this.page.locator("oe-indicator").all();
@@ -105,14 +107,13 @@ class TestPage {
 
   public async create(customTemplate = this.defaultTemplate) {
     await this.page.setContent(`
-      <oe-verification-grid id="verification-grid" grid-size="3">
+      <oe-verification-grid id="verification-grid">
         ${customTemplate}
 
         <oe-data-source
           slot="data-source"
           for="verification-grid"
           src="${this.testJsonInput}"
-          local
         ></oe-data-source>
       </oe-verification-grid>
     `);
@@ -500,6 +501,32 @@ class TestPage {
     )) as SubjectWrapper[];
   }
 
+  public async getPopulatedGridSize(): Promise<number> {
+    const gridSize = await getBrowserValue<VerificationGridComponent>(this.gridComponent(), "populatedTileCount");
+    return gridSize as number;
+  }
+
+  public async getGridShape(): Promise<GridShape> {
+    const targetGrid = this.gridComponent();
+    const columns = (await getBrowserValue<VerificationGridComponent>(targetGrid, "columns")) as number;
+    const rows = (await getBrowserValue<VerificationGridComponent>(targetGrid, "rows")) as number;
+    return { columns, rows };
+  }
+
+  public async getGridTileSize(): Promise<Size> {
+    // because all the grid tiles should be the same size, we can just check the
+    // first grid tile and get its size
+    const gridTiles = await this.gridTileComponents();
+    const targetGridTile = gridTiles[0];
+
+    const boundingBox = await targetGridTile.boundingBox();
+    if (!boundingBox) {
+      throw new Error("Grid tile bounding box not found");
+    }
+
+    return { width: boundingBox.width, height: boundingBox.height };
+  }
+
   // change attributes
   public async changeSelectionMode(mode: SelectionObserverType) {
     // we use "as any" here because the setBrowserAttribute helper typing checks
@@ -538,6 +565,27 @@ class TestPage {
     await this.changeGridSetting("isFullscreen", state);
   }
 
+  public async onlyShowTileOutlines(): Promise<void> {
+    await this.page.addStyleTag({
+      content: "* { visibility: hidden; }",
+    });
+
+    const gridTiles = await this.gridTileComponents();
+    for (const tile of gridTiles) {
+      await tile.evaluate((element: VerificationGridTileComponent) => {
+        element.style.border = "red 2px solid";
+        element.style.visibility = "visible";
+      });
+    }
+
+    const tileContents = await this.gridTileContainers();
+    for (const tile of tileContents) {
+      await tile.evaluate((element: HTMLElement) => {
+        element.style.visibility = "hidden";
+      });
+    }
+  }
+
   private async changeGridSetting(key: keyof VerificationGridSettings, value: boolean) {
     await this.gridComponent().evaluate(
       (element: VerificationGridComponent, { key, value }) => {
diff --git a/src/tests/verification-grid/verification-grid.e2e.spec.ts b/src/tests/verification-grid/verification-grid.e2e.spec.ts
index 8d3419c7..387666bd 100644
--- a/src/tests/verification-grid/verification-grid.e2e.spec.ts
+++ b/src/tests/verification-grid/verification-grid.e2e.spec.ts
@@ -1,5 +1,15 @@
 import { Size } from "../../models/rendering";
-import { catchLocatorEvent, changeToDesktop, changeToMobile, getBrowserValue, setBrowserAttribute } from "../helpers";
+import { GridShape } from "../../helpers/controllers/dynamic-grid-sizes";
+import {
+  catchLocatorEvent,
+  changeToDesktop,
+  changeToMobile,
+  DeviceMock,
+  getBrowserValue,
+  mockDeviceSize,
+  setBrowserAttribute,
+  testBreakpoints,
+} from "../helpers";
 import { verificationGridFixture as test } from "./verification-grid.e2e.fixture";
 import { expect } from "../assertions";
 import {
@@ -56,12 +66,6 @@ test.describe("single verification grid", () => {
   });
 
   test.describe("initial state", () => {
-    test("should have the correct grid size", async ({ fixture }) => {
-      const expectedGridSize = 3;
-      const gridSize = await fixture.getGridSize();
-      expect(gridSize).toEqual(expectedGridSize);
-    });
-
     test("should have the correct decisions", async ({ fixture }) => {
       const expectedDecisions = ["true", "false"];
       const decisions = await fixture.availableDecision();
@@ -336,6 +340,10 @@ test.describe("single verification grid", () => {
   });
 
   test.describe("progress bar", () => {
+    test.beforeEach(async ({ fixture }) => {
+      await fixture.changeGridSize(3);
+    });
+
     test("should not show the completed segment if a partial page of decisions is made ", async ({ fixture }) => {
       // make a decision about one of the tiles. Meaning that the grid should
       // not auto-page and the progress bar should not change
@@ -494,6 +502,10 @@ test.describe("single verification grid", () => {
   // });
 
   test.describe("pagination", () => {
+    test.beforeEach(async ({ fixture }) => {
+        await fixture.changeGridSize(3);
+    });
+
     test("should disable the previous button when there are no previous pages", async ({ fixture }) => {
       await expect(fixture.previousPageButton()).toBeDisabled();
     });
@@ -883,8 +895,10 @@ test.describe("single verification grid", () => {
     });
   });
 
-  test.describe("changing grid size", () => {
+  test.describe("grid sizes", () => {
     test("should show new items when increasing the grid size", async ({ fixture }) => {
+      await fixture.changeGridSize(3);
+
       const initialGridSize = await fixture.getGridSize();
       const newGridSize = initialGridSize + 1;
 
@@ -923,6 +937,8 @@ test.describe("single verification grid", () => {
     // grid indexes are used to create sub-selection shortcut keys. If this test
     // fails, it is likely that sub-selection keyboard shortcuts do not work
     test("should have the correct grid index after increasing grid size", async ({ fixture }) => {
+      await fixture.changeGridSize(3);
+
       const initialGridSize = await fixture.getGridSize();
       const newGridSize = initialGridSize + 1;
       await fixture.changeGridSize(newGridSize);
@@ -938,8 +954,6 @@ test.describe("single verification grid", () => {
     });
 
     test("should not page any items when increasing and decreasing the grid size", async ({ fixture }) => {
-      // increase the grid size by one item, then remove it
-      // we should see that the
       const initialGridSize = await fixture.getGridSize();
       await fixture.changeGridSize(initialGridSize + 1);
       await fixture.changeGridSize(initialGridSize);
@@ -949,6 +963,108 @@ test.describe("single verification grid", () => {
 
       expect(realizedPagedItems).toBe(expectedPagedItems);
     });
+
+    interface DynamicGridSizeTest {
+      deviceName: string;
+      device: DeviceMock;
+      withoutSlotShape: GridShape;
+      withSlotShape: GridShape;
+    }
+
+    const testedGridSizes: DynamicGridSizeTest[] = [
+      {
+        deviceName: "desktop",
+        device: mockDeviceSize(testBreakpoints.desktop),
+        withoutSlotShape: { columns: 5, rows: 2 },
+        withSlotShape: { columns: 6, rows: 2 },
+      },
+      {
+        deviceName: "laptop",
+        device: mockDeviceSize(testBreakpoints.laptop),
+        withoutSlotShape: { columns: 4, rows: 1 },
+        withSlotShape: { columns: 4, rows: 1 },
+      },
+      {
+        deviceName: "landscape tablet",
+        device: mockDeviceSize(testBreakpoints.tabletLandscape),
+        withoutSlotShape: { columns: 3, rows: 1 },
+        withSlotShape: { columns: 3, rows: 1 },
+      },
+      {
+        deviceName: "portrait tablet",
+        device: mockDeviceSize(testBreakpoints.tabletPortrait),
+        withoutSlotShape: { columns: 2, rows: 2 },
+        withSlotShape: { columns: 2, rows: 1 },
+      },
+      {
+        deviceName: "mobile",
+        device: changeToMobile,
+        withoutSlotShape: { columns: 1, rows: 1 },
+        withSlotShape: { columns: 1, rows: 1 },
+      },
+    ];
+
+    for (const testConfig of testedGridSizes) {
+      const testedSlotContent = `
+        <template>
+          <div>
+            <h1>Heading text</h1>
+
+            <p>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil odio laboriosam ea culpa magnam aut iure,
+              voluptate nisi. Enim natus blanditiis quam ipsa vero magni deserunt ratione qui explicabo. Est!
+            </p>
+          </div>
+        </template>
+
+        <oe-verification verified="true" shortcut="Y"></oe-verification>
+        <oe-verification verified="false" shortcut="N"></oe-verification>
+      `;
+
+      test.describe(testConfig.deviceName, () => {
+        test(`should have the correct grid shape`, async ({ fixture }) => {
+          await testConfig.device(fixture.page);
+          await fixture.create();
+          await fixture.dismissHelpDialog();
+
+          const realizedGridShape = await fixture.getGridShape();
+          expect(realizedGridShape).toEqual(testConfig.withoutSlotShape);
+        });
+
+        // if these tests are failing it is a sign that the grid tile's
+        // intersection observer is not working correctly
+        test("should have the correct grid shape with slot content", async ({ fixture }) => {
+          await testConfig.device(fixture.page);
+          await fixture.create(testedSlotContent);
+          await fixture.dismissHelpDialog();
+
+          const realizedGridShape = await fixture.getGridShape();
+          expect(realizedGridShape).toEqual(testConfig.withSlotShape);
+        });
+
+        test("should look correct", async ({ fixture }) => {
+          await testConfig.device(fixture.page);
+          await fixture.create();
+          await fixture.dismissHelpDialog();
+
+          await fixture.onlyShowTileOutlines();
+          await expect(fixture.page).toHaveScreenshot();
+        });
+
+        test("should look correct with slot content", async ({ fixture }) => {
+          await testConfig.device(fixture.page);
+          await fixture.create(testedSlotContent);
+          await fixture.dismissHelpDialog();
+
+          // to reduce the maintainability burden of this test, we only check
+          // the grid container for visual correctness
+          // we also make all of the elements invisible, and only show outlines
+          // of each grid tile
+          await fixture.onlyShowTileOutlines();
+          await expect(fixture.page).toHaveScreenshot();
+        });
+      });
+    }
   });
 
   // during progressive creation, individual elements will be added to the
@@ -963,19 +1079,22 @@ test.describe("decision meter", () => {
         <oe-classification tag="car" true-shortcut="h"></oe-classification>
         <oe-classification tag="koala" true-shortcut="j"></oe-classification>
         <oe-classification tag="bird" true-shortcut="k"></oe-classification>
-      `);
+			`);
+
+      await fixture.changeGridSize(3);
 
       await fixture.dismissHelpDialog();
     });
 
     test("should have the correct number of segments in the progress meter", async ({ fixture }) => {
-      const expectedSegments = 3;
+      const expectedSegments = await fixture.getGridSize();
       const realizedSegments = await fixture.gridTileProgressMeterSegments();
       expect(realizedSegments).toHaveLength(expectedSegments);
     });
 
     test("should have the correct colors without a decision", async ({ fixture }) => {
-      const expectedColors = Array.from({ length: 3 }).fill(await fixture.panelColor());
+      const gridSize = await fixture.getGridSize();
+      const expectedColors = Array.from({ length: gridSize }).fill(await fixture.panelColor());
       const realizedColors = await fixture.progressMeterColors();
       expect(realizedColors).toEqual(expectedColors);
     });
@@ -1091,7 +1210,7 @@ test.describe("decision meter", () => {
       await fixture.create(`
         <oe-verification verified="true"></oe-verification>
         <oe-verification verified="false"></oe-verification>
-      `);
+			`);
 
       await fixture.dismissHelpDialog();
     });
@@ -1130,7 +1249,7 @@ test.describe("decision meter", () => {
         <oe-classification tag="car">Car</oe-classification>
         <oe-classification tag="bird">Bird</oe-classification>
         <oe-classification tag="cat">Cat</oe-classification>
-      `);
+			`);
 
       await fixture.dismissHelpDialog();
     });
@@ -1176,9 +1295,9 @@ test.describe("verification grid with custom template", () => {
         <oe-verification verified="false">Not Koala</oe-verification>
 
         <template>
-          <oe-info-card></oe-info-card>
+        <oe-info-card></oe-info-card>
         </template>
-      `;
+			`;
       await fixture.create(customTemplate);
 
       await fixture.changeGridSource(fixture.testJsonInput);
