fix overflow in chromium

Author: texm

ui/src/components/commands/CommandExecution.svelte

@@ -23,7 +23,7 @@
   }
 </script>
 
-<div class="max-w-80 max-h-96 overflow-x-scroll" bind:this={msgContainer}>
+<div class="max-w-80 max-h-96 overflow-x-auto" bind:this={msgContainer}>
   {#each output as line, i}
     <pre data-prefix={i} class:text-warning={line["type"] === "stderr"}><code
         >{line["message"]}</code

ui/src/components/commands/Terminal.svelte

@@ -47,7 +47,7 @@
   </div>
 
   <div
-    class="flex-grow max-w-80 h-80 overflow-x-scroll bg-base-content p-2"
+    class="flex-grow max-w-80 h-80 overflow-x-auto bg-base-content p-2"
     bind:this={scrollDiv}
   >
     <div class="whitespace-pre-wrap flex flex-col">

ui/src/components/common/CenterCard.svelte

@@ -1,6 +1,6 @@
 <div class="flex flex-row max-h-full justify-center">
   <div class="card flex-shrink-0 w-full max-w-xl max-h-full">
-    <div class="card-body overflow-scroll">
+    <div class="card-body overflow-auto">
       <slot />
     </div>
   </div>

ui/src/components/common/ContentPage.svelte

@@ -2,12 +2,12 @@
   <div class="hidden sm:flex rounded-lg flex-row w-full max-h-full">
     <slot name="sidebar" />
 
-    <div class="pl-3 h-full w-full flex flex-col overflow-x-scroll">
+    <div class="pl-3 h-full w-full flex flex-col overflow-x-auto">
       <div class="w-full">
         <slot name="header" />
       </div>
 
-      <div class="overflow-scroll w-full h-full rounded-lg">
+      <div class="overflow-auto w-full h-full rounded-lg">
         <slot name="content" />
       </div>
     </div>
@@ -18,8 +18,8 @@
     <slot name="header" />
     <slot name="sidebar" />
 
-    <div class="overflow-scroll h-full">
-      <div class="rounded-lg w-full h-full overflow-scroll pb-6">
+    <div class="overflow-auto h-full">
+      <div class="rounded-lg w-full h-full overflow-auto pb-6">
         <slot name="content" />
       </div>
     </div>

ui/src/components/common/Logs.svelte

@@ -2,7 +2,7 @@
   export let logs;
 </script>
 
-<div class="overflow-x-scroll h-full bg-neutral px-4 rounded-lg">
+<div class="overflow-x-auto h-full bg-neutral px-4 rounded-lg">
   <div class="py-4 h-full text-neutral-content">
     {#each logs as line, i}
       <pre data-prefix={i}><code>{line.trim()}</code></pre>

ui/src/components/common/Sidebar.svelte

@@ -22,7 +22,7 @@
 </script>
 
 <div
-  class="menu rounded-box hidden sm:inline-block min-w-fit max-h-full bg-base-200 overflow-y-scroll shadow-lg h-fit"
+  class="menu rounded-box hidden sm:inline-block min-w-fit max-h-full bg-base-200 overflow-y-auto shadow-lg h-fit"
 >
   {#each pages as info, i}
     <li class="">

ui/src/components/common/Steps.svelte

@@ -50,7 +50,7 @@
   <div
     class="flex flex-col bg-base-200 p-4 rounded-lg shadow-xl flex-grow max-h-full"
   >
-    <div class="overflow-scroll" in:fly={{ y: 100, duration: 250 }}>
+    <div class="overflow-auto" in:fly={{ y: 100, duration: 250 }}>
       <svelte:component
         this={steps[currentStep].component}
         {props}

ui/src/routes/+page.svelte

@@ -17,7 +17,7 @@
   const serviceStates = {};
 </script>
 
-<div class="flex flex-col md:flex-row gap-8 p-4 h-full overflow-y-scroll">
+<div class="flex flex-col md:flex-row gap-8 p-4 h-full overflow-y-auto">
   <div class="hidden md:inline flex-grow" />
   <div class="max-w-full md:max-w-lg md:flex-grow">
     <DashboardCardList

ui/src/routes/settings/users/SSHKey.svelte

@@ -18,7 +18,7 @@
 </script>
 
 <div
-  class="flex gap-2 max-w-full overflow-scroll text-center items-center bg-base-100 p-4 rounded-lg"
+  class="flex gap-2 max-w-full overflow-auto text-center items-center bg-base-100 p-4 rounded-lg"
 >
   <span class="text-lg">{name}</span>
   <div class="tooltip tooltip-left flex-grow" data-tip={tooltipText}>