Remove flex- from grow and shrink classNames (#2248)

Clean up Tailwind flex- class names

Author: charliepark

app/components/CapacityBar.tsx

@@ -52,7 +52,7 @@ type TitleCellProps = { icon: JSX.Element; title: string; unit: string }
 function TitleCell({ icon, title, unit }: TitleCellProps) {
   return (
     <div>
-      <div className="flex flex-grow items-center">
+      <div className="flex grow items-center">
         <span className="mr-2 flex h-4 w-4 items-center text-accent">{icon}</span>
         <span className="!normal-case text-mono-sm text-secondary">{title}</span>
         <span className="ml-1 !normal-case text-mono-sm text-quaternary">({unit})</span>

app/components/TopBarPicker.tsx

@@ -57,10 +57,7 @@ const TopBarPicker = (props: TopBarPickerProps) => {
           <Wrap
             when={props.to}
             with={
-              <Link
-                to={props.to!}
-                className="-m-1 flex-grow rounded-lg p-1 hover:bg-hover"
-              />
+              <Link to={props.to!} className="-m-1 grow rounded-lg p-1 hover:bg-hover" />
             }
           >
             <div className="flex min-w-[120px] max-w-[185px] items-center pr-2">
@@ -91,7 +88,7 @@ const TopBarPicker = (props: TopBarPickerProps) => {
         )}
 
         {props.items && (
-          <div className="ml-2 flex-shrink-0">
+          <div className="ml-2 shrink-0">
             <DropdownMenu.Trigger
               className="group"
               aria-label={props['aria-label']}

app/layouts/helpers.tsx

@@ -21,13 +21,13 @@ export function ContentPane() {
   useScrollRestoration(ref)
   return (
     <div ref={ref} className="flex flex-col overflow-auto" data-testid="scroll-container">
-      <div className="flex flex-grow flex-col pb-8">
+      <div className="flex grow flex-col pb-8">
         <SkipLinkTarget />
         <main className="[&>*]:gutter">
           <Outlet />
         </main>
       </div>
-      <div className="sticky bottom-0 flex-shrink-0 justify-between overflow-hidden border-t bg-default border-secondary empty:border-t-0">
+      <div className="sticky bottom-0 shrink-0 justify-between overflow-hidden border-t bg-default border-secondary empty:border-t-0">
         <Pagination.Target />
         <PageActionsTarget />
       </div>
@@ -43,7 +43,7 @@ export function ContentPane() {
  */
 export const SerialConsoleContentPane = () => (
   <div className="flex flex-col overflow-auto">
-    <div className="flex flex-grow flex-col">
+    <div className="flex grow flex-col">
       <SkipLinkTarget />
       <main className="[&>*]:gutter h-full">
         <Outlet />

app/pages/project/floating-ips/AttachFloatingIpModal.tsx

@@ -23,7 +23,7 @@ function FloatingIpLabel({ fip }: { fip: FloatingIp }) {
         {fip.description && (
           <>
             <span className="mx-1 text-quinary selected:text-accent-disabled">/</span>
-            <div className="flex-grow overflow-hidden overflow-ellipsis whitespace-pre text-left">
+            <div className="grow overflow-hidden overflow-ellipsis whitespace-pre text-left">
               {fip.description}
             </div>
           </>

app/pages/project/instances/instance/SerialConsolePage.tsx

@@ -100,19 +100,19 @@ export function SerialConsolePage() {
     <div className="!mx-0 flex h-full max-h-[calc(100vh-60px)] !w-full flex-col">
       <Link
         to={pb.instance(instanceSelector)}
-        className="mx-3 mb-6 mt-3 flex h-10 flex-shrink-0 items-center rounded px-3 bg-accent-secondary"
+        className="mx-3 mb-6 mt-3 flex h-10 shrink-0 items-center rounded px-3 bg-accent-secondary"
       >
         <PrevArrow12Icon className="text-accent-tertiary" />
         <div className="ml-2 text-mono-sm text-accent">
           <span className="text-accent-tertiary">Back to</span> instance
         </div>
       </Link>
 
-      <div className="gutter relative w-full flex-shrink flex-grow overflow-hidden">
+      <div className="gutter relative w-full shrink grow overflow-hidden">
         {connectionStatus !== 'open' && <SerialSkeleton />}
         <Suspense fallback={null}>{ws.current && <Terminal ws={ws.current} />}</Suspense>
       </div>
-      <div className="flex-shrink-0 justify-between overflow-hidden border-t bg-default border-secondary empty:border-t-0">
+      <div className="shrink-0 justify-between overflow-hidden border-t bg-default border-secondary empty:border-t-0">
         <div className="gutter flex h-20 items-center justify-between">
           <div>
             <EquivalentCliCommand command={cliCmd.serialConsole({ project, instance })} />
@@ -131,7 +131,7 @@ function SerialSkeleton() {
   const instanceSelector = useInstanceSelector()
 
   return (
-    <div className="relative h-full flex-shrink flex-grow overflow-hidden">
+    <div className="relative h-full shrink grow overflow-hidden">
       <div className="h-full space-y-2 overflow-hidden">
         {[...Array(200)].map((_e, i) => (
           <div

app/pages/project/instances/instance/tabs/MetricsTab.tsx

@@ -123,7 +123,7 @@ function DiskMetric({
   }
 
   return (
-    <div className="flex w-1/2 flex-grow flex-col">
+    <div className="flex w-1/2 grow flex-col">
       <h2 className="ml-3 flex items-center text-mono-xs text-secondary ">
         {title} <div className="ml-1 normal-case text-quaternary">{label}</div>
         {isLoading && <Spinner className="ml-2" />}

app/ui/lib/DatePicker.tsx

@@ -95,7 +95,7 @@ export function DatePicker(props: DatePickerProps) {
                 value={state.timeValue}
                 onChange={handleSetTime}
                 hourCycle={24}
-                className="flex-grow"
+                className="grow"
               />
             </div>
           </Dialog>

app/ui/lib/DateRangePicker.tsx

@@ -96,15 +96,15 @@ export function DateRangePicker(props: DateRangePickerProps) {
                 value={state.timeRange?.start || null}
                 onChange={(v: TimeValue) => state.setTime('start', v)}
                 hourCycle={24}
-                className="flex-shrink-0 flex-grow basis-0"
+                className="shrink-0 grow basis-0"
               />
               <div className="text-quinary">–</div>
               <TimeField
                 label="End time"
                 value={state.timeRange?.end || null}
                 onChange={(v: TimeValue) => state.setTime('end', v)}
                 hourCycle={24}
-                className="flex-shrink-0 flex-grow basis-0"
+                className="shrink-0 grow basis-0"
               />
             </div>
           </Dialog>

app/ui/lib/Pagination.tsx

@@ -55,7 +55,7 @@ export const Pagination = ({
           className
         )}
       >
-        <span className="flex-inline flex-grow text-tertiary">
+        <span className="flex-inline grow text-tertiary">
           rows per page <PageInput number={pageSize} />
         </span>
         <span className="flex space-x-3">