Merge pull request #14940 from TylerAPfledderer/refactor/tailwind-max-w-screens

refactor(tailwind): apply `max-width-screen-*` usage

Author: pettinarip

src/components/Hero/HubHero/HubHero.stories.tsx

@@ -1,8 +1,5 @@
 import { useTranslations } from "next-intl"
-import type { CSSProperties } from "react"
-import { Meta, StoryObj } from "@storybook/react"
-
-import { screens } from "@/lib/utils/screen"
+import type { Meta, StoryObj } from "@storybook/react/*"
 
 import { langViewportModes } from "@/storybook/modes"
 
@@ -23,10 +20,7 @@ const meta = {
   },
   decorators: [
     (Story) => (
-      <div
-        style={{ "--hero-decorator-max-w": screens["2xl"] } as CSSProperties}
-        className="mx-auto max-w-[var(--hero-decorator-max-w)]"
-      >
+      <div className="mx-auto max-w-screen-2xl">
         <Story />
       </div>
     ),

src/components/Hero/MdxHero/MdxHero.stories.tsx

@@ -1,10 +1,7 @@
-import type { CSSProperties } from "react"
 import { Meta, StoryObj } from "@storybook/react"
 
 import { HStack } from "@/components/ui/flex"
 
-import { screens } from "@/lib/utils/screen"
-
 import { langViewportModes } from "@/storybook/modes"
 
 import MdxHeroComponent from "./"
@@ -22,10 +19,7 @@ const meta = {
   },
   decorators: [
     (Story) => (
-      <HStack
-        style={{ "--hero-decorator-max-w": screens["2xl"] } as CSSProperties}
-        className="mx-auto h-[100vh] max-w-[var(--hero-decorator-max-w)]"
-      >
+      <HStack className="mx-auto h-[100vh] max-w-screen-2xl">
         <Story />
       </HStack>
     ),

src/components/ui/__stories__/Table/Table.stories.tsx

@@ -1,8 +1,5 @@
-import type { CSSProperties } from "react"
 import { Meta, StoryObj } from "@storybook/react"
 
-import { screens } from "@/lib/utils/screen"
-
 import { Flex } from "../../flex"
 import { Table as TableComponent } from "../../table"
 
@@ -17,10 +14,7 @@ const meta = {
   component: TableComponent,
   decorators: [
     (Story) => (
-      <Flex
-        style={{ "--table-decorator-max-w": screens["md"] } as CSSProperties}
-        className="max-w-[var(--table-decorator-max-w)] flex-col gap-16"
-      >
+      <Flex className="max-w-screen-md flex-col gap-16">
         <Story />
       </Flex>
     ),

src/pages/[locale]/roadmap/vision.tsx

@@ -1,9 +1,5 @@
 import { GetStaticProps } from "next"
-import type {
-  ComponentProps,
-  ComponentPropsWithRef,
-  CSSProperties,
-} from "react"
+import type { ComponentProps, ComponentPropsWithRef } from "react"
 
 import type { BasePageProps, ChildOnlyProp, Lang, Params } from "@/lib/types"
 
@@ -27,7 +23,6 @@ import { List, ListItem } from "@/components/ui/list"
 import { cn } from "@/lib/utils/cn"
 import { existsNamespace } from "@/lib/utils/existsNamespace"
 import { getLastDeployDate } from "@/lib/utils/getLastDeployDate"
-import { screens } from "@/lib/utils/screen"
 import { getLocaleTimestamp } from "@/lib/utils/time"
 import { getRequiredNamespacesForPage } from "@/lib/utils/translations"
 
@@ -81,13 +76,7 @@ const CardContainer = ({ className, ...props }: FlexProps) => (
 )
 
 const ProblemCardContainer = (props: ChildOnlyProp) => {
-  return (
-    <CardContainer
-      style={{ "--container-max-w": screens.lg } as CSSProperties}
-      className="mx-auto max-w-[var(--container-max-w)]"
-      {...props}
-    />
-  )
+  return <CardContainer className="mx-auto max-w-screen-lg" {...props} />
 }
 
 const CentreCard = (props: ComponentPropsWithRef<typeof Card>) => (