style: use canonical tailwind class names

apps/outreach/src/components/layout/Header.astro

@@ -44,7 +44,7 @@ const navLinks = [
       <nav class="flex gap-3 overflow-hidden duration-300" id="nav-dropdown">
         {navLinks.map((props) => <NavLink {...props} />)}
       </nav>
-      <div class="mx-5 h-8 w-[1px] rounded-md bg-slate-300 dark:bg-slate-700"></div>
+      <div class="mx-5 h-8 w-px rounded-md bg-slate-300 dark:bg-slate-700"></div>
       <div class="flex grow justify-end gap-3">
         <ThemeToggle />
         <LanguageToggle />
@@ -62,7 +62,7 @@ const navLinks = [
 >
 </div>
 <div
-  class="fixed right-0 z-30 flex h-screen w-full max-w-[28rem] translate-x-[28rem] flex-col overflow-y-scroll bg-slate-50 py-6 shadow-xl transition-transform duration-300 dark:bg-slate-800"
+  class="fixed right-0 z-30 flex h-screen w-full max-w-md translate-x-112 flex-col overflow-y-scroll bg-slate-50 py-6 shadow-xl transition-transform duration-300 dark:bg-slate-800"
   id="mobile-slider"
 >
   <div class="flex items-center justify-between px-4">
@@ -91,7 +91,7 @@ const navLinks = [
   const closeSlider = () => {
     document.body.style.overflow = 'auto';
     backdrop.style.opacity = '0%';
-    slider.classList.add('translate-x-[28rem]');
+    slider.classList.add('translate-x-112');
     setTimeout(() => {
       backdrop.style.height = '0vh';
       backdrop.style.width = '0vw';
@@ -103,7 +103,7 @@ const navLinks = [
     backdrop.style.height = '100vh';
     backdrop.style.width = '100vw';
     backdrop.style.opacity = '50%';
-    slider.classList.remove('translate-x-[28rem]');
+    slider.classList.remove('translate-x-112');
   };
 
   close.addEventListener('click', closeSlider);

apps/outreach/src/components/overview/Testimonials.astro

@@ -29,7 +29,7 @@ const { resolvedLanguage, t } = useTranslations(Astro.url);
       <ArrowLeftIcon />
     </button>
     <div
-      class="scrollbar-hidden flex w-full max-w-screen-md snap-x snap-mandatory overflow-x-scroll scroll-smooth"
+      class="scrollbar-hidden flex w-full max-w-3xl snap-x snap-mandatory overflow-x-scroll scroll-smooth"
       id="testimonials-slider"
     >
       {

apps/outreach/src/pages/[locale]/faq.astro

@@ -25,7 +25,7 @@ faq.sort((a, b) => {
 
 <Page bilingual>
   <PageHeading title={t('faq.heading')} />
-  <div class="mx-auto max-w-screen-md">
+  <div class="mx-auto max-w-3xl">
     {
       faq.map(({ data: { entries, title } }) => (
         <div>

apps/outreach/src/pages/[locale]/team.astro

@@ -35,7 +35,7 @@ const { resolvedLanguage, t } = useTranslations(Astro.url);
               <Headshot className="md:rounded-lg md:shadow-lg" src={image} alt={fullName} />
             </div>
             <div class="flex flex-col md:col-span-3 lg:col-span-2">
-              <div class="mb-2 flex h-14 flex-col justify-between py-2.5 pl-[4.25rem] md:mb-0 md:py-1.5 md:pl-0">
+              <div class="mb-2 flex h-14 flex-col justify-between py-2.5 pl-17 md:mb-0 md:py-1.5 md:pl-0">
                 <h5 class="leading-none font-bold tracking-tight md:text-lg">{`${fullName}${suffix ? `, ${suffix}` : ''}`}</h5>
                 <span class="text-sm leading-none font-semibold tracking-tight text-sky-700 md:text-base dark:text-sky-500 md:dark:text-sky-400">
                   {position[resolvedLanguage]}

apps/playground/src/components/Command/CommandGroup.tsx

@@ -10,7 +10,7 @@ export const CommandGroup = forwardRef<
   return (
     <CommandPrimitive.Group
       className={cn(
-        'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',
+        'text-foreground **:[[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium',
         className
       )}
       ref={ref}

apps/playground/src/components/Command/CommandList.tsx

@@ -9,7 +9,7 @@ export const CommandList = forwardRef<
 >(function CommandList({ className, ...props }, ref) {
   return (
     <CommandPrimitive.List
-      className={cn('max-h-[300px] overflow-x-hidden overflow-y-auto', className)}
+      className={cn('max-h-75 overflow-x-hidden overflow-y-auto', className)}
       ref={ref}
       {...props}
     />

apps/playground/src/components/ContextMenu/ContextMenu.stories.tsx

@@ -10,7 +10,7 @@ export const Default: Story = {
   args: {
     children: (
       <>
-        <ContextMenu.Trigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
+        <ContextMenu.Trigger className="flex h-37.5 w-75 items-center justify-center rounded-md border border-dashed text-sm">
           Right click here
         </ContextMenu.Trigger>
         <ContextMenu.Content className="w-64">

apps/playground/src/components/ContextMenu/ContextMenuContent.tsx

@@ -11,7 +11,7 @@ export const ContextMenuContent = forwardRef<
     <ContextMenuPrimitive.Portal>
       <ContextMenuPrimitive.Content
         className={cn(
-          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md',
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-md',
           className
         )}
         ref={ref}

apps/playground/src/components/ContextMenu/ContextMenuItem.tsx

@@ -10,7 +10,7 @@ export const ContextMenuItem = forwardRef<
   return (
     <ContextMenuPrimitive.Item
       className={cn(
-        'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-xs px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-xs px-2 py-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50',
         className
       )}
       ref={ref}

apps/playground/src/components/Editor/EditorPane.tsx

@@ -131,7 +131,7 @@ export const EditorPane = () => {
 
   return (
     <MonacoEditor
-      className="h-full min-h-[576px]"
+      className="h-full min-h-144"
       defaultLanguage={fileType satisfies 'css' | 'html' | 'javascript' | 'json' | 'typescript'}
       defaultValue={defaultFile.content}
       keepCurrentModel={true}

apps/playground/src/components/Editor/EditorTab.tsx

@@ -18,7 +18,7 @@ export const EditorTab = ({ filename }: EditorTabProps) => {
   return (
     <button
       className={cn(
-        'flex w-full max-w-[14rem] items-center justify-between gap-12 border-l border-slate-900/10 px-4 py-1.5 text-sm last:border-r dark:border-slate-100/25',
+        'flex w-full max-w-56 items-center justify-between gap-12 border-l border-slate-900/10 px-4 py-1.5 text-sm last:border-r dark:border-slate-100/25',
         filename === selectedFilename && 'bg-slate-100 shadow-xs dark:bg-slate-700'
       )}
       type="button"

apps/playground/src/components/Header/CloneButton/CloneButton.tsx

@@ -41,7 +41,7 @@ export const CloneButton = () => {
             <CopyPlusIcon />
           </Tooltip.Trigger>
         </Dialog.Trigger>
-        <Dialog.Content className="sm:max-w-[475px]">
+        <Dialog.Content className="sm:max-w-118.75">
           <Dialog.Header>
             <Dialog.Title>{t({ en: 'Create New Instrument', fr: 'Créer un nouvel instrument' })}</Dialog.Title>
             <Dialog.Description>

apps/playground/src/components/Header/ShareButton/ShareButton.tsx

@@ -50,7 +50,7 @@ export const ShareButton = () => {
             <Share2Icon />
           </Tooltip.Trigger>
         </Popover.Trigger>
-        <Popover.Content align="end" autofocus={false} className="w-[520px] p-4">
+        <Popover.Content align="end" autofocus={false} className="w-130 p-4">
           <div className="flex flex-col space-y-2 text-center sm:text-left">
             <Heading variant="h5">{t({ en: 'Share Instrument', fr: "Partager l'instrument" })}</Heading>
             <p className="text-muted-foreground text-sm">

apps/playground/src/components/Resizable/Resizable.stories.tsx

@@ -11,7 +11,7 @@ export const Default: Story = {
     children: (
       <>
         <Resizable.Panel defaultSize={50}>
-          <div className="flex h-[200px] items-center justify-center p-6">
+          <div className="flex h-50 items-center justify-center p-6">
             <span className="font-semibold">One</span>
           </div>
         </Resizable.Panel>

apps/web/src/components/BulkRemoteAssignmentWizard/BulkRemoteAssignmentWizard.tsx

@@ -59,7 +59,7 @@ export const BulkRemoteAssignmentWizard = ({
   const wizard = useBulkAssignmentWizard({ groupId, instruments, subjectIdDisplayLength });
 
   return (
-    <div className="mx-auto flex w-full max-w-[70rem] flex-col gap-6" data-testid="bulk-remote-assignment-wizard">
+    <div className="mx-auto flex w-full max-w-280 flex-col gap-6" data-testid="bulk-remote-assignment-wizard">
       {wizard.step === 'SOURCE' && (
         <SourceStep
           selectedIds={wizard.subjectIds}

apps/web/src/components/DemoBanner/DemoBanner.tsx

@@ -33,7 +33,7 @@ export const DemoBanner = ({ onLogin }: DemoBannerProps) => {
         </div>
       </div>
       <Dialog.Content
-        className="w-[calc(100%-1rem)] max-w-[600px] px-2.5 sm:px-6"
+        className="w-[calc(100%-1rem)] max-w-150 px-2.5 sm:px-6"
         data-testid="demo-dialog"
         onOpenAutoFocus={(event) => {
           event.preventDefault();

apps/web/src/components/EmailTemplateEditor/EmailTemplateEditor.tsx

@@ -104,7 +104,7 @@ export const EmailTemplateEditor = ({
           )}
         </div>
         <TextArea
-          className="min-h-[15rem]"
+          className="min-h-60"
           data-testid={`${idPrefix}-body`}
           id={`${idPrefix}-body`}
           readOnly={!onChange}

apps/web/src/components/InstrumentPreviewDialog/InstrumentPreviewDialog.tsx

@@ -69,7 +69,7 @@ export const InstrumentPreviewDialog = ({ item, items, onClose }: InstrumentPrev
 
   return (
     <Dialog open onOpenChange={onClose}>
-      <Dialog.Content className={showForm ? 'sm:max-w-[800px]' : 'max-h-[85vh] sm:max-w-[560px]'}>
+      <Dialog.Content className={showForm ? 'sm:max-w-200' : 'max-h-[85vh] sm:max-w-140'}>
         <Dialog.Header>
           <Dialog.Title>{item.title}</Dialog.Title>
         </Dialog.Header>
@@ -131,7 +131,7 @@ export const InstrumentPreviewDialog = ({ item, items, onClose }: InstrumentPrev
                   ) : (
                     <ol className="text-muted-foreground mt-1 max-h-48 list-decimal space-y-1 overflow-auto rounded-md border border-slate-200 py-2 pr-3 pl-8 dark:border-slate-800">
                       {seriesItemTitles.map((title, index) => (
-                        <li className="break-words" key={`${title}-${index}`}>
+                        <li className="wrap-break-word" key={`${title}-${index}`}>
                           {title}
                         </li>
                       ))}

apps/web/src/components/LanguageSelect/LanguageSelect.tsx

@@ -25,7 +25,7 @@ export const LanguageSelect = ({
   const { t } = useTranslation();
   return (
     <Select value={value} onValueChange={(next) => onChange($Language.parse(next))}>
-      <Select.Trigger className="w-[180px]" data-testid={testId} id={id}>
+      <Select.Trigger className="w-45" data-testid={testId} id={id}>
         <Select.Value />
       </Select.Trigger>
       <Select.Content>

apps/web/src/components/Layout/Layout.tsx

@@ -30,7 +30,7 @@ export const Layout = () => {
       >
         {groupSwitcherPosition === 'topbar' && isGroupSwitcherVisible && (
           <div className="bg-background/80 sticky top-0 z-20 hidden items-center justify-end px-4 py-2 backdrop-blur-lg md:flex md:h-16">
-            <GroupSwitcher className="w-[180px]" />
+            <GroupSwitcher className="w-45" />
           </div>
         )}
         <main className="container flex grow flex-col">

apps/web/src/components/LoginBranding/LoginBrandingPanel.stories.tsx

@@ -24,7 +24,7 @@ export const Default: Story = {
 export const Preview: Story = {
   args: {
     branding: baseBranding,
-    className: 'h-96 w-[36rem]',
+    className: 'h-96 w-xl',
     preview: true
   }
 };

apps/web/src/components/LoginBranding/LoginBrandingPanel.tsx

@@ -361,7 +361,7 @@ export const LoginBrandingPanel = ({
     >
       <div
         aria-hidden
-        className="pointer-events-none absolute inset-0 bg-gradient-to-r from-transparent via-transparent to-black/25"
+        className="pointer-events-none absolute inset-0 bg-linear-to-r from-transparent via-transparent to-black/25"
       />
 
       <div className={cn('flex flex-1 flex-col', preview ? 'gap-4' : 'gap-8')}>

apps/web/src/components/Sidebar/Sidebar.tsx

@@ -34,17 +34,17 @@ export const Sidebar = () => {
 
   return (
     <div
-      className="flex h-screen w-[19rem] flex-col bg-slate-900 px-3 py-2 text-slate-100 shadow-lg dark:border-r dark:border-slate-700"
+      className="flex h-screen w-76 flex-col bg-slate-900 px-3 py-2 text-slate-100 shadow-lg dark:border-r dark:border-slate-700"
       data-testid="sidebar"
     >
       <div data-testid="sidebar-branding-container" id="sidebar-branding-container">
         <Branding className="h-12" fontSize="md" logoVariant="light" />
       </div>
-      <hr className="my-2 h-[1px] border-none bg-slate-700" />
+      <hr className="my-2 h-px border-none bg-slate-700" />
       {groupSwitcherPosition === 'sidebar' && isGroupSwitcherVisible && (
         <div className="mb-2">
           <GroupSwitcher />
-          <hr className="mt-2 h-[1px] border-none bg-slate-700" />
+          <hr className="mt-2 h-px border-none bg-slate-700" />
         </div>
       )}
       <nav className="flex min-h-0 flex-1 scrollbar-none flex-col divide-y divide-slate-700 overflow-y-auto">
@@ -116,7 +116,7 @@ export const Sidebar = () => {
             initial={{ opacity: 0 }}
           >
             <h5 className="text-sm font-medium">{t('common.sessionInProgress')}</h5>
-            <hr className="my-1.5 h-[1px] border-none bg-slate-700" />
+            <hr className="my-1.5 h-px border-none bg-slate-700" />
             {isSubjectWithPersonalInfo(currentSession.subject!) ? (
               <div data-testid="current-session-info">
                 <p>
@@ -163,7 +163,7 @@ export const Sidebar = () => {
           </motion.div>
         )}
       </AnimatePresence>
-      <hr className="my-1 h-[1px] border-none bg-slate-700" />
+      <hr className="my-1 h-px border-none bg-slate-700" />
       <div className="flex items-center justify-between py-2">
         <UserDropup />
         <div className="flex h-full items-center gap-2">

apps/web/src/components/UserPermissionsEditor/UserPermissionsEditor.tsx

@@ -36,7 +36,7 @@ const CellSelect = ({ disabled, label, name, onValueChange, options, placeholder
   <Select disabled={disabled} name={name} value={value ?? ''} onValueChange={onValueChange}>
     <Select.Trigger
       aria-label={label}
-      className="data-[placeholder]:text-muted-foreground h-auto min-w-0 border-0 bg-transparent px-0 py-0 shadow-none [&>span]:block [&>span]:min-w-0 [&>span]:truncate"
+      className="data-placeholder:text-muted-foreground h-auto min-w-0 border-0 bg-transparent px-0 py-0 shadow-none [&>span]:block [&>span]:min-w-0 [&>span]:truncate"
       data-testid={`${name}-select-trigger`}
     >
       <Select.Value placeholder={placeholder} />

apps/web/src/routes/_app/admin/branding/index.tsx

@@ -15,7 +15,7 @@ const LoginPagePreview = () => (
       <div className="h-1 w-10 rounded-full bg-white/60" />
       <div className="h-0.5 w-7 rounded-full bg-white/40" />
     </div>
-    <div className="flex w-[45%] flex-col items-center justify-center gap-1.5 bg-gradient-to-b from-[#0ea5e9]/10 to-[#0c4a6e]/10 p-2 dark:from-[#0ea5e9]/20 dark:to-[#0c4a6e]/20">
+    <div className="flex w-[45%] flex-col items-center justify-center gap-1.5 bg-linear-to-b from-[#0ea5e9]/10 to-[#0c4a6e]/10 p-2 dark:from-[#0ea5e9]/20 dark:to-[#0c4a6e]/20">
       <Logo className="h-auto w-3 opacity-60" variant="auto" />
       <div className="bg-muted-foreground/30 h-0.5 w-6 rounded-full" />
       <div className="border-border bg-muted h-2.5 w-8 rounded-sm border" />

apps/web/src/routes/_app/admin/instrument-repos/index.tsx

@@ -254,7 +254,7 @@ const RouteComponent = () => {
         }}
       />
       {isDialogOpen && (
-        <Dialog.Content className="sm:max-w-[475px]">
+        <Dialog.Content className="sm:max-w-118.75">
           <Dialog.Header>
             <Dialog.Title>
               {t({
@@ -280,7 +280,7 @@ const RouteComponent = () => {
         </Dialog.Content>
       )}
       {isViewOpen && repoToView && (
-        <Dialog.Content className="sm:max-w-[900px]">
+        <Dialog.Content className="sm:max-w-225">
           <Dialog.Header>
             <Dialog.Title>
               {t({

apps/web/src/routes/_app/admin/instruments.tsx

@@ -44,7 +44,7 @@ const ArchiveDialog = ({ onClose, row }: { onClose: () => void; row: SeriesRow }
 
   return (
     <Dialog open onOpenChange={onClose}>
-      <Dialog.Content className="sm:max-w-[500px]" data-testid="archive-series-dialog">
+      <Dialog.Content className="sm:max-w-125" data-testid="archive-series-dialog">
         <Dialog.Header>
           <Dialog.Title>
             {t({

apps/web/src/routes/_app/admin/settings.tsx

@@ -255,7 +255,7 @@ const RouteComponent = () => {
                       </HoverCard>
                     </div>
                     <Input
-                      className="w-[90px] shrink-0"
+                      className="w-22.5 shrink-0"
                       data-testid="default-assignment-duration-input"
                       inputMode="numeric"
                       max={MAX_ASSIGNMENT_DURATION_DAYS}
@@ -323,7 +323,7 @@ const RouteComponent = () => {
                   value={groupSwitcherPosition}
                   onValueChange={(value) => setGroupSwitcherPosition(value as GroupSwitcherPosition)}
                 >
-                  <Select.Trigger className="w-[180px] shrink-0" data-testid="group-switcher-position-select">
+                  <Select.Trigger className="w-45 shrink-0" data-testid="group-switcher-position-select">
                     <Select.Value />
                   </Select.Trigger>
                   <Select.Content>

apps/web/src/routes/_app/dashboard.tsx

@@ -405,7 +405,7 @@ const RouteComponent = () => {
           >
             <div className="p-8 pb-4">
               <div className="flex items-center gap-4">
-                <div className="rounded-xl bg-gradient-to-br from-blue-500/20 to-indigo-600/20 p-3 transition-all duration-300 group-hover:from-blue-500/30 group-hover:to-indigo-600/30">
+                <div className="rounded-xl bg-linear-to-br from-blue-500/20 to-indigo-600/20 p-3 transition-all duration-300 group-hover:from-blue-500/30 group-hover:to-indigo-600/30">
                   <DocumentTextIcon className="h-6 w-6 text-blue-600 dark:text-blue-400" />
                 </div>
                 <div>
@@ -529,7 +529,7 @@ const RouteComponent = () => {
           >
             <div className="p-8 pb-4">
               <div className="flex items-center gap-4">
-                <div className="rounded-xl bg-gradient-to-br from-amber-500/20 to-orange-600/20 p-3 transition-all duration-300 group-hover:from-amber-500/30 group-hover:to-orange-600/30">
+                <div className="rounded-xl bg-linear-to-br from-amber-500/20 to-orange-600/20 p-3 transition-all duration-300 group-hover:from-amber-500/30 group-hover:to-orange-600/30">
                   <UserIcon className="h-6 w-6 text-amber-600 dark:text-amber-400" />
                 </div>
                 <div>

apps/web/src/routes/_app/group/manage.tsx

@@ -341,7 +341,7 @@ const CreateSeriesInstrumentDialog = ({
   return (
     <React.Fragment>
       <Dialog open onOpenChange={onClose}>
-        <Dialog.Content className="sm:max-w-[600px]">
+        <Dialog.Content className="sm:max-w-150">
           <Dialog.Header>
             <Dialog.Title>
               {t({
@@ -474,7 +474,7 @@ const CreateSeriesInstrumentDialog = ({
       </Dialog>
       {duplicateOf !== null && (
         <Dialog open onOpenChange={() => setDuplicateOf(null)}>
-          <Dialog.Content className="sm:max-w-[450px]">
+          <Dialog.Content className="sm:max-w-112.5">
             <Dialog.Header>
               <Dialog.Title>
                 {t({ en: 'Series Already Exists', es: 'La serie ya existe', fr: 'La série existe déjà' })}
@@ -521,7 +521,7 @@ const DeleteInstrumentDialog = ({
 
   return (
     <Dialog open onOpenChange={onClose}>
-      <Dialog.Content className="sm:max-w-[450px]">
+      <Dialog.Content className="sm:max-w-112.5">
         <Dialog.Header>
           <Dialog.Title>
             {t({

apps/web/src/routes/_app/group/remote-assignments.tsx

@@ -130,7 +130,7 @@ const RouteComponent = () => {
       )}
 
       {mode === 'DELETE' && (
-        <div className="mx-auto w-full max-w-[70rem]">
+        <div className="mx-auto w-full max-w-280">
           <DeleteRemoteAssignments
             groupId={currentGroup.id}
             subjectIdDisplayLength={currentGroup.settings.subjectIdDisplayLength ?? 9}