fix(webui): correct panel borders on smaller screens

expo · May 1, 2024 · d6b416f · d6b416f
1 parent 74c3db7
commit d6b416f
Showing 1 changed file with 8 additions and 1 deletion.
diff --git a/webui/src/ui/Panel.tsx b/webui/src/ui/Panel.tsx
@@ -1,3 +1,4 @@
+import { cx } from 'class-variance-authority';
 import { type PropsWithChildren } from 'react';
 
 export function PanelGroup(props: PropsWithChildren) {
@@ -10,7 +11,13 @@ export function PanelGroup(props: PropsWithChildren) {
 
 export function Panel(props: PropsWithChildren) {
   return (
-    <div className="flex flex-col border-secondary bg-subtle border border-l-0 first:border-l first:rounded-l-md last:rounded-r-md overflow-hidden">
+    <div
+      className={cx(
+        'flex flex-col border-secondary bg-subtle border overflow-hidden',
+        'first:rounded-t-md last:rounded-b-md',
+        'md:border-r-0 md:last:border md:first:rounded-r-none md:first:rounded-l-md md:last:rounded-l-none md:last:rounded-r-md'
+      )}
+    >
       {props.children}
     </div>
   );