diff --git a/webapp/src/lib/layouts/connect/ConnectSection.svelte b/webapp/src/lib/layouts/connect/ConnectSection.svelte
index e027ed2..7e83993 100644
--- a/webapp/src/lib/layouts/connect/ConnectSection.svelte
+++ b/webapp/src/lib/layouts/connect/ConnectSection.svelte
@@ -35,7 +35,7 @@ $effect(() => {
 </script>
 
 <section aria-labelledby="connect-section-label">
-  <div class="mx-6 mt-6 mb-4 stack gap-2 lg:row xl:mx-0">
+  <div class="mx-6 mt-6 mb-4 stack gap-2 md:row xl:mx-0">
     <div class="grow">
       <h2 class="text-xl/8 font-semibold" id="connect-section-label">Connect to a device</h2>
 
diff --git a/webapp/src/lib/layouts/write/WriteSection.svelte b/webapp/src/lib/layouts/write/WriteSection.svelte
index 748ed3a..9cbfa03 100644
--- a/webapp/src/lib/layouts/write/WriteSection.svelte
+++ b/webapp/src/lib/layouts/write/WriteSection.svelte
@@ -14,7 +14,7 @@ let inProgress = $state(false)
 <section aria-labelledby="write-section-label">
   <Separator decorative />
 
-  <div class="mx-6 mt-4 mb-6 stack gap-2 lg:row xl:mx-0">
+  <div class="mx-6 mt-4 mb-6 stack gap-2 md:row xl:mx-0">
     <div class="grow">
       <h2 class="text-xl/8 font-semibold" id="write-section-label">Write pattern to device</h2>