fix: upgrade prettier plugin & rerun

Signed-off-by: Matt Krick <[email protected]>
ParabolInc · Jan 31, 2025 · 833ea99 · 833ea99
1 parent 5310982
commit 833ea99
Show file tree

Hide file tree

Showing 100 changed files with 161 additions and 170 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -14,5 +14,6 @@
       }
     }
   ],
-  "plugins": ["prettier-plugin-organize-imports", "prettier-plugin-tailwindcss"]
+  "plugins": ["prettier-plugin-organize-imports", "prettier-plugin-tailwindcss"],
+  "tailwindStylesheet": "./packages/client/styles/theme/global.css"
 }
diff --git a/package.json b/package.json
@@ -117,7 +117,7 @@
     "postcss-loader": "^7.0.2",
     "prettier": "^3.2.5",
     "prettier-plugin-organize-imports": "^4.0.0",
-    "prettier-plugin-tailwindcss": "^0.5.13",
+    "prettier-plugin-tailwindcss": "^0.6.11",
     "raw-loader": "^4.0.2",
     "relay-compiler": "^18.2.0",
     "relay-config": "^12.0.1",

diff --git a/packages/client/components/ActivityLibrary/ActivityCard.tsx b/packages/client/components/ActivityLibrary/ActivityCard.tsx
@@ -39,7 +39,7 @@ export const ActivityCardImage = (props: PropsWithChildren<ActivityCardImageProp
     >
       <img className='object-contain' src={backgroundSrc} alt='' />
       <img
-        className='absolute left-0 top-0 h-full w-full object-contain p-10'
+        className='absolute top-0 left-0 h-full w-full object-contain p-10'
         src={src}
         alt='Card Illustration'
       />
@@ -115,7 +115,7 @@ export const ActivityCard = (props: ActivityCardProps) => {
               side='bottom'
               align='center'
               sideOffset={20}
-              className='max-w-md whitespace-normal rounded-lg bg-white p-4 text-left text-slate-700 shadow-lg hover:cursor-pointer sm:max-w-sm'
+              className='max-w-md rounded-lg bg-white p-4 text-left whitespace-normal text-slate-700 shadow-lg hover:cursor-pointer sm:max-w-sm'
             >
               <div className='mb-2 text-left text-lg font-semibold'>{title}</div>
               <ActivityLibraryCardDescription templateRef={template} />

diff --git a/packages/client/components/ActivityLibrary/ActivityDetails/ActivityDetails.tsx b/packages/client/components/ActivityLibrary/ActivityDetails/ActivityDetails.tsx
@@ -101,7 +101,7 @@ const ActivityDetails = (props: Props) => {
             <div className='w-max text-xl font-semibold'>Start Activity</div>
           </div>
           <div className='mx-auto'>
-            <div className='flex flex-col justify-start pl-4 pr-4 md:pr-14 xl:flex-row xl:justify-center xl:pl-14'>
+            <div className='flex flex-col justify-start pr-4 pl-4 md:pr-14 xl:flex-row xl:justify-center xl:pl-14'>
               <div>
                 <ActivityCard
                   className='mb-8 w-80 max-md:hidden sm:ml-14 xl:mb-0 xl:ml-0'

diff --git a/packages/client/components/ActivityLibrary/ActivityDetails/ActivityDetailsBadges.tsx b/packages/client/components/ActivityLibrary/ActivityDetails/ActivityDetailsBadges.tsx
@@ -29,12 +29,12 @@ const ActivityDetailsBadges = (props: Props) => {
     <div className='mb-4 flex gap-2'>
       <ActivityDetailsCategoryBadge isEditing={isEditing} templateRef={template} />
       {isPremium && (
-        <ActivityDetailsBadge className='select-none bg-gold-300 text-grape-700'>
+        <ActivityDetailsBadge className='bg-gold-300 text-grape-700 select-none'>
           Premium
         </ActivityDetailsBadge>
       )}
       {isCustom && (
-        <ActivityDetailsBadge className='select-none bg-grape-700 text-white'>
+        <ActivityDetailsBadge className='bg-grape-700 text-white select-none'>
           Custom
         </ActivityDetailsBadge>
       )}

diff --git a/packages/client/components/ActivityLibrary/ActivityDetails/ActivityDetailsCategoryBadge.tsx b/packages/client/components/ActivityLibrary/ActivityDetails/ActivityDetailsCategoryBadge.tsx
@@ -38,7 +38,7 @@ const ActivityDetailsCategoryBadge = (props: Props) => {
       <DropdownMenu.Trigger asChild disabled={!isEditing}>
         <PlainButton className={clsx(!isEditing && 'cursor-default', 'flex')} disabled={false}>
           <ActivityDetailsBadge
-            className={clsx(`${CATEGORY_THEMES[category].primary}`, 'select-none text-white')}
+            className={clsx(`${CATEGORY_THEMES[category].primary}`, 'text-white select-none')}
           >
             {CATEGORY_ID_TO_NAME[category]}
           </ActivityDetailsBadge>
@@ -53,8 +53,7 @@ const ActivityDetailsCategoryBadge = (props: Props) => {
               return (
                 <DropdownMenu.RadioItem
                   key={categoryId}
-                  className='outline-hidden flex cursor-pointer select-none px-4 py-3 data-highlighted:bg-slate-100
-                data-[state=checked]:bg-slate-200'
+                  className='flex cursor-pointer px-4 py-3 outline-hidden select-none data-highlighted:bg-slate-100 data-[state=checked]:bg-slate-200'
                   value={categoryId}
                 >
                   <span
@@ -63,7 +62,7 @@ const ActivityDetailsCategoryBadge = (props: Props) => {
                       'h-5 w-5 rounded-full'
                     )}
                   ></span>
-                  <span className='pl-5 pr-10 text-xs font-semibold'>
+                  <span className='pr-10 pl-5 text-xs font-semibold'>
                     {CATEGORY_ID_TO_NAME[categoryId]}
                   </span>
                 </DropdownMenu.RadioItem>

diff --git a/packages/client/components/ActivityLibrary/ActivityDetails/TemplateDetails.tsx b/packages/client/components/ActivityLibrary/ActivityDetails/TemplateDetails.tsx
@@ -308,7 +308,7 @@ export const TemplateDetails = (props: Props) => {
       </div>
 
       {isEditing && (
-        <div className='fixed bottom-0 left-0 right-0 flex h-20 w-full items-center justify-center bg-slate-200'>
+        <div className='fixed right-0 bottom-0 left-0 flex h-20 w-full items-center justify-center bg-slate-200'>
           <button
             onClick={() => setIsEditing(false)}
             className='w-max cursor-pointer rounded-full bg-sky-500 px-10 py-3 text-center font-sans text-lg font-semibold text-white hover:bg-sky-600'

diff --git a/packages/client/components/ActivityLibrary/ActivityDetailsSidebar.tsx b/packages/client/components/ActivityLibrary/ActivityDetailsSidebar.tsx
@@ -118,7 +118,7 @@ const ActivityDetailsSidebar = (props: Props) => {
   // user has no teams
   if (!selectedTeam)
     return (
-      <div className='flex w-full flex-col items-center border-t border-solid border-slate-300 bg-white px-4 pt-2 lg:right-0 lg:top-0 lg:h-full lg:w-96 lg:flex-1 lg:border-l lg:pt-14'>
+      <div className='flex w-full flex-col items-center border-t border-solid border-slate-300 bg-white px-4 pt-2 lg:top-0 lg:right-0 lg:h-full lg:w-96 lg:flex-1 lg:border-l lg:pt-14'>
         <div className='self-center italic'>You have no teams to start a meeting with!</div>
         <StyledLink to='/newteam'>Create a team</StyledLink>
       </div>
@@ -202,7 +202,7 @@ const ActivityDetailsSidebar = (props: Props) => {
 
   return (
     <>
-      <div className='sticky bottom-0 flex w-full flex-col border-t border-solid border-slate-300 bg-white px-4 pt-2 lg:right-0 lg:top-0 lg:h-full lg:w-96 lg:flex-1 lg:border-l lg:pt-14'>
+      <div className='sticky bottom-0 flex w-full flex-col border-t border-solid border-slate-300 bg-white px-4 pt-2 lg:top-0 lg:right-0 lg:h-full lg:w-96 lg:flex-1 lg:border-l lg:pt-14'>
         <div className='grow'>
           <div className='flex items-center justify-between pt-2 text-xl font-semibold lg:pt-0'>
             Settings

diff --git a/packages/client/components/ActivityLibrary/ActivityGrid.tsx b/packages/client/components/ActivityLibrary/ActivityGrid.tsx
@@ -37,7 +37,7 @@ const ActivityGrid = (props: ActivityGridProps) => {
             className='flex rounded-2xl hover:bg-slate-100 focus:outline-sky-500'
           >
             <ActivityCard
-              className='aspect-256/160 group flex-1'
+              className='group aspect-256/160 flex-1'
               key={template.id}
               theme={CATEGORY_THEMES[template.category as CategoryID]}
               title={template.name}
@@ -52,7 +52,7 @@ const ActivityGrid = (props: ActivityGridProps) => {
               {viewer && (
                 <ActivityCardFavorite
                   templateId={template.id}
-                  className='absolute bottom-2 right-2'
+                  className='absolute right-2 bottom-2'
                   viewerRef={viewer}
                 />
               )}

diff --git a/packages/client/components/ActivityLibrary/ActivityLibrary.tsx b/packages/client/components/ActivityLibrary/ActivityLibrary.tsx
@@ -436,7 +436,7 @@ export const ActivityLibrary = (props: Props) => {
                     subCategoryTemplates.length > 0 ? (
                       <Fragment key={subCategory}>
                         {subCategory && (
-                          <div className='ml-4 mt-8 text-xl font-bold text-slate-700'>
+                          <div className='mt-8 ml-4 text-xl font-bold text-slate-700'>
                             {subCategory}
                           </div>
                         )}
@@ -470,7 +470,7 @@ export const ActivityLibrary = (props: Props) => {
         </ScrollArea.Viewport>
         <ScrollArea.Scrollbar
           orientation='vertical'
-          className='flex h-full w-2.5 touch-none select-none border-l border-l-transparent p-[1px] transition-colors'
+          className='flex h-full w-2.5 touch-none border-l border-l-transparent p-[1px] transition-colors select-none'
         >
           <ScrollArea.Thumb className={`relative flex-1 rounded-full bg-slate-600`} />
         </ScrollArea.Scrollbar>

diff --git a/packages/client/components/ActivityLibrary/ActivityLibraryCardDescription.tsx b/packages/client/components/ActivityLibrary/ActivityLibraryCardDescription.tsx
@@ -20,7 +20,7 @@ export const RetroDescription = (props: RetroDescriptionProps) => {
       {prompts!.map((prompt) => (
         <div key={prompt.id} className='mb-1 flex flex-col items-start py-1 sm:flex-row'>
           <div
-            className='mr-4 mt-1 h-3 w-3 shrink-0 self-start rounded-full'
+            className='mt-1 mr-4 h-3 w-3 shrink-0 self-start rounded-full'
             style={{backgroundColor: prompt.groupColor}}
           />
           <div className='flex min-w-0 grow flex-col'>

diff --git a/packages/client/components/ActivityLibrary/ActivityLibraryEmptyState.tsx b/packages/client/components/ActivityLibrary/ActivityLibraryEmptyState.tsx
@@ -16,13 +16,13 @@ const ActivityLibraryEmptyState = (props: Props) => {
   if (!searchQuery && categoryId === 'favorite') {
     return (
       <div className='relative mx-auto flex justify-center p-2 align-middle text-slate-700'>
-        <div className='p-4 md:p-0 '>
+        <div className='p-4 md:p-0'>
           <img
             className='w-[500px] md:w-[700px] lg:w-[900px]'
             src={favoriteImg}
             alt='Favorite placeholder'
           />
-          <div className='absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform'>
+          <div className='absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transform'>
             <div className='flex flex-col items-center'>
               <FavoriteIcon
                 className='icon-color-red icon-border-gold rounded-full p-3 text-5xl md:text-6xl lg:p-5 lg:text-8xl'

diff --git a/packages/client/components/ActivityLibrary/CreateNewActivity/CreateNewActivity.tsx b/packages/client/components/ActivityLibrary/CreateNewActivity/CreateNewActivity.tsx
@@ -301,15 +301,15 @@ export const CreateNewActivity = (props: Props) => {
 
               <RaisedButton
                 palette='pink'
-                className='focus:outline-hidden h-12 px-4 text-lg font-semibold text-white focus:ring-2 focus:ring-offset-2'
+                className='h-12 px-4 text-lg font-semibold text-white focus:ring-2 focus:ring-offset-2 focus:outline-hidden'
                 onClick={handleUpgrade}
               >
                 Upgrade to Team Plan
               </RaisedButton>
             </div>
           ) : (
             <BaseButton
-              className='focus:outline-hidden mx-auto h-12 rounded-full bg-sky-500 text-lg font-semibold text-white hover:bg-sky-600 focus:ring-2 focus:ring-sky-600 focus:ring-offset-2 active:ring-sky-600'
+              className='mx-auto h-12 rounded-full bg-sky-500 text-lg font-semibold text-white hover:bg-sky-600 focus:ring-2 focus:ring-sky-600 focus:ring-offset-2 focus:outline-hidden active:ring-sky-600'
               onClick={createCustomActivityLookup[selectedActivity.type]}
             >
               Confirm Format & Team

diff --git a/packages/client/components/ActivityLibrary/SearchBar.tsx b/packages/client/components/ActivityLibrary/SearchBar.tsx
@@ -9,9 +9,9 @@ interface Props {
 const SearchBar = (props: Props) => {
   const {searchQuery, onChange} = props
   return (
-    <div className='outline-hidden ml-2 flex grow items-center rounded-full bg-slate-200 px-4 py-2 outline-1 outline-offset-0 focus-within:outline-sky-500'>
+    <div className='ml-2 flex grow items-center rounded-full bg-slate-200 px-4 py-2 outline-hidden outline-1 outline-offset-0 focus-within:outline-sky-500'>
       <input
-        className='outline-hidden w-full border-none bg-transparent font-sans text-sm text-slate-700 placeholder-slate-800'
+        className='w-full border-none bg-transparent font-sans text-sm text-slate-700 placeholder-slate-800 outline-hidden'
         autoFocus
         autoComplete='off'
         name='search'

diff --git a/packages/client/components/AdhocTeamMultiSelect/AdhocTeamMultiSelect.tsx b/packages/client/components/AdhocTeamMultiSelect/AdhocTeamMultiSelect.tsx
@@ -181,7 +181,7 @@ export const AdhocTeamMultiSelect = (props: Props) => {
           <input
             {...getInputProps()}
             placeholder={!value.length ? 'ex. Traci or [email protected]' : ''}
-            className='outline-hidden m-0 box-border min-h-[36px] w-0 min-w-[30px] grow border-0 bg-white pl-1 text-black'
+            className='m-0 box-border min-h-[36px] w-0 min-w-[30px] grow border-0 bg-white pl-1 text-black outline-hidden'
           />
         </div>
         {error && <div className='mt-2 text-sm font-semibold text-tomato-500'>{error}</div>}
@@ -200,7 +200,7 @@ export const AdhocTeamMultiSelect = (props: Props) => {
                 key={option.id ?? option.email}
                 className={`[&.Mui-focused]:bg-slate-100 ${
                   isSelected ? 'bg-slate-100' : ''
-                } outline-hidden flex h-10 w-full cursor-pointer select-none items-center justify-between rounded px-3 text-sm hover:bg-slate-100 focus:bg-slate-100 data-disabled:pointer-events-none data-disabled:opacity-50`}
+                } flex h-10 w-full cursor-pointer items-center justify-between rounded px-3 text-sm outline-hidden select-none hover:bg-slate-100 focus:bg-slate-100 data-disabled:pointer-events-none data-disabled:opacity-50`}
               >
                 {!option.id && <SendIcon className='mr-2 text-base' />}
                 {option.id && (

diff --git a/packages/client/components/DashNavList/DashNavList.tsx b/packages/client/components/DashNavList/DashNavList.tsx
@@ -47,11 +47,11 @@ const DashNavList = (props: Props) => {
   const teams = organizations.flatMap((org) => org.viewerTeams)
 
   return (
-    <div className='w-full p-3 pb-0 pt-4'>
+    <div className='w-full p-3 pt-4 pb-0'>
       {sortedOrgs.map((org) => (
         <div key={org.id} className='w-full pb-4'>
           <div className='mb-1 flex min-w-0 flex-1 flex-wrap items-center justify-between'>
-            <span className='flex-1 pl-3 text-base font-semibold leading-6 text-slate-700'>
+            <span className='flex-1 pl-3 text-base leading-6 font-semibold text-slate-700'>
               {org.name}
             </span>
             <Tooltip>

diff --git a/packages/client/components/Dashboard/DashSidebar.tsx b/packages/client/components/Dashboard/DashSidebar.tsx
@@ -98,8 +98,8 @@ const DashSidebar = (props: Props) => {
                   label={'Organizations'}
                   exact
                 />
-                <div className='mb-1 mt-4 flex min-h-[32px] items-center'>
-                  <span className='flex-1 pl-3 text-base font-semibold leading-6 text-slate-700'>
+                <div className='mt-4 mb-1 flex min-h-[32px] items-center'>
+                  <span className='flex-1 pl-3 text-base leading-6 font-semibold text-slate-700'>
                     {name}
                   </span>
                 </div>

diff --git a/packages/client/components/Dashboard/MobileDashSidebar.tsx b/packages/client/components/Dashboard/MobileDashSidebar.tsx
@@ -140,8 +140,8 @@ const MobileDashSidebar = (props: Props) => {
                 label={'Organizations'}
                 exact
               />
-              <div className='mb-1 mt-4 flex min-h-[32px] items-center'>
-                <span className='flex-1 pl-3 text-base font-semibold leading-6 text-slate-700'>
+              <div className='mt-4 mb-1 flex min-h-[32px] items-center'>
+                <span className='flex-1 pl-3 text-base leading-6 font-semibold text-slate-700'>
                   {name}
                 </span>
               </div>

diff --git a/packages/client/components/DiscussionThreadInput.tsx b/packages/client/components/DiscussionThreadInput.tsx
@@ -206,7 +206,7 @@ const DiscussionThreadInput = (props: Props) => {
   if (!editor) return null
   return (
     <div
-      className='z-0 flex flex-col shadow-discussion-input data-disabled:pointer-events-none data-disabled:opacity-50 data-[reply=true]:-ml-3 data-[reply=true]:mt-2 data-[reply=true]:rounded-t data-[reply=true]:shadow-discussion-thread'
+      className='z-0 flex flex-col shadow-discussion-input data-disabled:pointer-events-none data-disabled:opacity-50 data-[reply=true]:mt-2 data-[reply=true]:-ml-3 data-[reply=true]:rounded-t data-[reply=true]:shadow-discussion-thread'
       data-disabled={isDisabled}
       data-reply={isReply}
       ref={containerRef}

diff --git a/packages/client/components/DiscussionThreadList.tsx b/packages/client/components/DiscussionThreadList.tsx
@@ -109,7 +109,7 @@ const DiscussionThreadList = (props: Props) => {
     <div ref={listRef} className='flex flex-1 flex-col overflow-auto' onScroll={handleScroll}>
       {header}
       {/* https://stackoverflow.com/questions/36130760/use-justify-content-flex-end-and-to-have-vertical-scrollbar */}
-      <div className='mx-0 mb-auto mt-0' />
+      <div className='mx-0 mt-0 mb-auto' />
       {showTranscription && transcription ? (
         <Transcription transcription={transcription} />
       ) : (

diff --git a/packages/client/components/DiscussionThreadListEmptyTranscriptState.tsx b/packages/client/components/DiscussionThreadListEmptyTranscriptState.tsx
@@ -130,7 +130,7 @@ const DiscussionThreadListEmptyTranscriptState = (props: Props) => {
           }}
         >
           <input
-            className='outline-hidden mt-4 w-full appearance-none rounded-sm border border-slate-400 bg-transparent p-3 text-sm text-slate-600'
+            className='mt-4 w-full appearance-none rounded-sm border border-slate-400 bg-transparent p-3 text-sm text-slate-600 outline-hidden'
             autoFocus
             placeholder='Zoom meeting URL'
             onChange={onChange}

diff --git a/packages/client/components/EditableAvatar/EditableAvatar.tsx b/packages/client/components/EditableAvatar/EditableAvatar.tsx
@@ -16,12 +16,12 @@ const EditableAvatar = (props: Props) => {
         picture={picture}
         className={clsx(`h-16 w-16 border-4 border-solid border-slate-200`, className)}
       />
-      <div className='absolute left-0 top-0 flex h-full w-full items-center justify-center rounded-full bg-slate-400 text-sm font-semibold text-slate-800 opacity-0 transition-opacity  duration-300 hover:opacity-75'>
+      <div className='absolute top-0 left-0 flex h-full w-full items-center justify-center rounded-full bg-slate-400 text-sm font-semibold text-slate-800 opacity-0 transition-opacity duration-300 hover:opacity-75'>
         EDIT
       </div>
       <div
         aria-hidden
-        className='icon-wrapper absolute right-0 top-0 z-10 rounded-full bg-slate-200 px-1.5 hover:bg-slate-200'
+        className='icon-wrapper absolute top-0 right-0 z-10 rounded-full bg-slate-200 px-1.5 hover:bg-slate-200'
       >
         <EditIcon className='mb-[-2px] w-3.5 pt-0.5' />
       </div>

diff --git a/packages/client/components/EmailPasswordAuthForm.tsx b/packages/client/components/EmailPasswordAuthForm.tsx
@@ -246,7 +246,7 @@ const EmailPasswordAuthForm = forwardRef((props: Props, ref: any) => {
       <Form onSubmit={onSubmit}>
         {error && <ErrorAlert message={error.message} />}
         {isSSO && submitting && <HelpMessage>Continue through the login popup</HelpMessage>}
-        <div className={signInWithSSOOnly ? 'hidden' : 'mb-4 mt-4'}>
+        <div className={signInWithSSOOnly ? 'hidden' : 'mt-4 mb-4'}>
           <FieldBlock isSSO={signInWithSSOOnly}>
             <EmailInputField
               autoFocus={!hasEmail}

diff --git a/packages/client/components/EmojiDropdown.tsx b/packages/client/components/EmojiDropdown.tsx
@@ -51,7 +51,7 @@ export default forwardRef(
     }))
 
     return (
-      <div className='border-rad outline-hidden in-data-[placement="bottom-start"]:animate-slide-down in-data-[placement="top-start"]:animate-slide-up z-10 max-h-56 overflow-auto rounded-md bg-white py-1 shadow-lg'>
+      <div className='border-rad z-10 max-h-56 overflow-auto rounded-md bg-white py-1 shadow-lg outline-hidden in-data-[placement="bottom-start"]:animate-slide-down in-data-[placement="top-start"]:animate-slide-up'>
         {items.length ? (
           items.map((item, idx) => {
             const isActive = idx === selectedIndex
@@ -60,7 +60,7 @@ export default forwardRef(
                 ref={isActive ? activeRef : undefined}
                 data-highlighted={isActive}
                 className={
-                  'outline-hidden hover:bg-slate-200! flex w-full cursor-pointer items-center rounded-md px-4 py-1 text-sm leading-8 text-slate-700 hover:text-slate-900 focus:bg-slate-200 data-highlighted:bg-slate-100 data-highlighted:text-slate-900'
+                  'flex w-full cursor-pointer items-center rounded-md px-4 py-1 text-sm leading-8 text-slate-700 outline-hidden hover:bg-slate-200! hover:text-slate-900 focus:bg-slate-200 data-highlighted:bg-slate-100 data-highlighted:text-slate-900'
                 }
                 key={item.id}
                 onClick={() => selectItem(idx)}

diff --git a/packages/client/components/GroupingKanbanColumn.tsx b/packages/client/components/GroupingKanbanColumn.tsx
@@ -157,11 +157,7 @@ const GroupingKanbanColumn = (props: Props) => {
   }
   return (
     <div
-      className={`relative ml-2 mr-2 flex h-full min-w-[320px] flex-1
-    flex-col content-start rounded-lg bg-slate-300 p-0 transition-all duration-100 ease-out first-of-type:ml-4
-    last-of-type:mr-4 single-reflection-column:max-w-min
-    ${isLengthExpanded ? '' : 'single-reflection-column:h-[calc(100%-56px)]'}
-    max-w-min`}
+      className={`relative mr-2 ml-2 flex h-full min-w-[320px] flex-1 flex-col content-start rounded-lg bg-slate-300 p-0 transition-all duration-100 ease-out first-of-type:ml-4 last-of-type:mr-4 single-reflection-column:max-w-min ${isLengthExpanded ? '' : 'single-reflection-column:h-[calc(100%-56px)]'} max-w-min`}
       ref={columnRef}
       data-cy={`group-column-${question}`}
     >