tweaks for lg size

ui/src/app/sidebar.tsx

@@ -14,10 +14,10 @@ const Sidebar = ({ close }: { close: () => void }) => {
   const location = useLocation().pathname;
   const linkProps = { nav, location };
   return (
-    <Stack justify="space-between" gap="md" h="100%" m="xl" mt="24">
+    <Stack justify="space-between" gap="md" h="96%" m="xl" mt="24">
       {/* TOP AREA (scrolling) */}
       <ScrollArea>
-        <Stack gap="0.25rem">
+        <Stack gap="0.25rem" mr="md">
           <SidebarLink
             label="Dashboard"
             icon={<ICONS.Dashboard size="1rem" />}

ui/src/components/tags/selector.tsx

@@ -55,7 +55,7 @@ export default function TagSelector({
           pl="0.4rem"
           className="bordered-heavy"
           justify="start"
-          w={{ base: "100%", xs: "fit-content" }}
+          w={{ base: "100%", xs: "138" }}
           fw="normal"
           leftSection={
             <Badge

ui/src/pages/settings/index.tsx

@@ -24,6 +24,7 @@ export default function Settings() {
     <Stack gap="xl" mb="50vh">
       <SettingsCoreInfo />
       <MobileFriendlyTabs
+        changeAt="xl"
         value={view}
         onValueChange={setView as any}
         tabs={[

ui/src/pages/settings/onboarding/index.tsx

@@ -5,7 +5,7 @@ import { useInvalidate, useRead, useSetTitle, useWrite } from "@/lib/hooks";
 import ResourceSelector from "@/resources/selector";
 import { ICONS } from "@/theme/icons";
 import { DataTable, SortableHeader } from "@/ui/data-table";
-import { Badge, Group, Switch, TextInput } from "@mantine/core";
+import { Badge, Group, Switch, TextInput, useMatches } from "@mantine/core";
 import { notifications } from "@mantine/notifications";
 import { ColumnDef } from "@tanstack/react-table";
 import { Types } from "komodo_client";
@@ -25,6 +25,10 @@ export default function SettingsOnboardingKeys() {
       notifications.show({ message: "Updated onboarding key", color: "green" });
     },
   });
+  const expiresSize = useMatches({
+    base: "sm",
+    xl: "md",
+  });
   const columns: (
     | ColumnDef<Types.OnboardingKey, unknown>
     | false
@@ -46,6 +50,7 @@ export default function SettingsOnboardingKeys() {
               })
             }
             onKeyDown={(e) => e.key === "Enter" && e.currentTarget.blur()}
+            miw={200}
           />
         ),
       },
@@ -74,7 +79,7 @@ export default function SettingsOnboardingKeys() {
             (tag) => !row.original.tags?.includes(tag._id?.$oid!),
           );
           return (
-            <Group>
+            <Group wrap="nowrap" gap="sm">
               <TagSelector
                 title="Select Tags"
                 tags={otherTags}
@@ -180,9 +185,10 @@ export default function SettingsOnboardingKeys() {
         }) => (
           <Badge
             color={expires && expires <= Date.now() ? "red" : "accent"}
-            fz={{ base: "sm", lg: "md" }}
-            p={{ base: "sm", lg: "md" }}
-            size="md"
+            fz={{ base: "sm", xl: "md" }}
+            p={{ base: "sm", xl: "md" }}
+            styles={{ label: { width: "fit-content", height: "fit-content" } }}
+            size={expiresSize}
           >
             {expires ? fmtDateWithMinutes(new Date(expires)) : "Never"}
           </Badge>

ui/src/resources/selector.tsx

@@ -94,7 +94,7 @@ export default function ResourceSelector({
           w="fit-content"
           maw="100%"
           rightSection={
-            <Group gap="xs" ml="sm">
+            <Group gap="xs" ml="sm" wrap="nowrap">
               {clearable && (
                 <ActionIcon
                   size="sm"

ui/src/ui/data-table.tsx

@@ -275,7 +275,7 @@ export const SortableHeader = <T, V>({
       style={{ width: "100%" }}
     >
       <Group justify="space-between" gap="sm" wrap="nowrap">
-        <Group gap="xs">
+        <Group justify="start" gap="xs" wrap="nowrap" miw="120" w="fit-content">
           <Text fw={600} size="sm" lineClamp={1}>
             {title}
           </Text>