improve mobile layout

Author: BeepBot99

src/App.svelte

@@ -10,13 +10,13 @@
     let configuring = $state(true);
 </script>
 
-<div class="min-h-dvh grid lg:grid-cols-2 p-6 gap-6 bg-base-100">
+<div class="min-h-dvh grid lg:grid-cols-2 lg:p-6 gap-6 bg-base-100">
     <div class:hidden={configuring}
-         class="max-w-[calc(100vw---spacing(12))] mb-16 lg:mb-0 lg:block bg-base-200 p-6 rounded-md shadow-sm border-2 border-base-content/20">
+         class="max-w-screen mb-16 lg:mb-0 lg:block bg-base-200 p-4 lg:p-6 lg:rounded-md lg:shadow-sm lg:border-2 lg:border-base-content/20">
         <CodeDisplay codeBuilder={xmlBuilder} {controlHub} {expansionHub}/>
     </div>
     <div class:hidden={!configuring}
-         class="lg:block bg-base-200 mb-16 lg:mb-0 rounded-md shadow-sm border-2 border-base-content/20 p-6">
+         class="lg:block bg-base-200 mb-16 lg:mb-0 lg:rounded-md lg:shadow-sm lg:border-2 lg:border-base-content/20 p-4 lg:p-6">
         <div class="tabs tabs-lift h-[calc(100%---spacing(10))]">
             <Hub name="Control Hub" bind:module={controlHub} checked={true}/>
             <Hub name="Expansion Hub" bind:module={expansionHub}/>