chore: lint

packages/web/src/javascripts/Components/AccountMenu/ConfirmPassword.tsx

@@ -109,7 +109,7 @@ const ConfirmPassword: FunctionComponent<Props> = ({
 
   return (
     <>
-      <div className="mt-1 mb-3 flex items-center px-3">
+      <div className="mb-3 mt-1 flex items-center px-3">
         <IconButton
           icon="arrow-left"
           title="Go back"
@@ -140,7 +140,7 @@ const ConfirmPassword: FunctionComponent<Props> = ({
         <Button
           primary
           fullWidth
-          className="mt-1 mb-3"
+          className="mb-3 mt-1"
           label={isRegistering ? 'Creating account...' : 'Create account & sign in'}
           onClick={handleConfirmFormSubmit}
           disabled={isRegistering}

packages/web/src/javascripts/Components/AccountMenu/CreateAccount.tsx

@@ -110,7 +110,7 @@ const CreateAccount: FunctionComponent<Props> = ({
 
   return (
     <>
-      <div className="mt-1 mb-3 flex items-center px-3">
+      <div className="mb-3 mt-1 flex items-center px-3">
         <IconButton
           icon="arrow-left"
           title="Go back"

packages/web/src/javascripts/Components/AccountMenu/GeneralAccountMenu.tsx

@@ -89,7 +89,7 @@ const GeneralAccountMenu: FunctionComponent<Props> = ({
 
   return (
     <>
-      <div className="mt-1 mb-1 hidden items-center justify-between px-3 md:flex">
+      <div className="mb-1 mt-1 hidden items-center justify-between px-3 md:flex">
         <div className="text-lg font-bold lg:text-base">Account</div>
         <div className="flex cursor-pointer" onClick={closeMenu}>
           <Icon type="close" className="text-neutral" />

packages/web/src/javascripts/Components/AccountMenu/SignIn.tsx

@@ -187,7 +187,7 @@ const SignInPane: FunctionComponent<Props> = ({ application, viewControllerManag
 
   return (
     <>
-      <div className="mt-1 mb-3 flex items-center px-3">
+      <div className="mb-3 mt-1 flex items-center px-3">
         <IconButton
           icon="arrow-left"
           title="Go back"
@@ -225,7 +225,7 @@ const SignInPane: FunctionComponent<Props> = ({ application, viewControllerManag
         />
         {error ? <div className="my-2 text-danger">{error}</div> : null}
         <Button
-          className="mt-1 mb-3"
+          className="mb-3 mt-1"
           label={isSigningIn ? 'Signing in...' : 'Sign in'}
           primary
           onClick={handleSignInFormSubmit}

packages/web/src/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceMenuItem.tsx

@@ -96,7 +96,7 @@ const WorkspaceMenuItem: FunctionComponent<Props> = ({
           onKeyDown={handleInputKeyDown}
           onBlur={handleInputBlur}
           onClick={(e) => e.stopPropagation()}
-          className="absolute top-1/2 left-11 -translate-y-1/2 bg-default"
+          className="absolute left-11 top-1/2 -translate-y-1/2 bg-default"
         />
       )}
     </div>

packages/web/src/javascripts/Components/AlertDialog/AlertDialog.tsx

@@ -17,7 +17,7 @@ const AlertDialog = ({
     <Dialog
       store={dialog}
       role="alertdialog"
-      className="fixed top-0 left-0 z-modal h-full w-full"
+      className="fixed left-0 top-0 z-modal h-full w-full"
       modal={false}
       portal={true}
       preventBodyScroll={true}
@@ -29,7 +29,7 @@ const AlertDialog = ({
       />
       <div
         className={classNames(
-          'absolute top-1/2 left-1/2 z-[1] w-[95vw] -translate-x-1/2 -translate-y-1/2 rounded border border-border bg-default px-6 py-5 shadow-xl md:w-auto',
+          'absolute left-1/2 top-1/2 z-[1] w-[95vw] -translate-x-1/2 -translate-y-1/2 rounded border border-border bg-default px-6 py-5 shadow-xl md:w-auto',
           !className?.includes('max-w-') && 'max-w-[600px]',
           className,
         )}

packages/web/src/javascripts/Components/ChallengeModal/ChallengeModal.tsx

@@ -276,7 +276,7 @@ const ChallengeModal: FunctionComponent<Props> = ({
           <button
             onClick={cancelChallenge}
             aria-label="Close modal"
-            className="absolute top-4 right-4 hidden cursor-pointer border-0 bg-transparent p-1 md:flex"
+            className="absolute right-4 top-4 hidden cursor-pointer border-0 bg-transparent p-1 md:flex"
           >
             <Icon type="close" className="text-neutral" />
           </button>
@@ -314,7 +314,7 @@ const ChallengeModal: FunctionComponent<Props> = ({
             ))}
           </form>
           {shouldShowSubmitButton && (
-            <Button primary disabled={isProcessing} className="mt-1 mb-3.5 min-w-76" onClick={submit}>
+            <Button primary disabled={isProcessing} className="mb-3.5 mt-1 min-w-76" onClick={submit}>
               {isProcessing ? 'Generating Keys...' : 'Submit'}
             </Button>
           )}

packages/web/src/javascripts/Components/ChallengeModal/ChallengePrompt.tsx

@@ -117,7 +117,7 @@ const ChallengeModalPrompt: FunctionComponent<Props> = ({
                     type="radio"
                     name={`session-duration-${prompt.id}`}
                     className={
-                      'absolute top-0 left-0 m-0 h-px w-px appearance-none focus:shadow-none focus:outline-none'
+                      'absolute left-0 top-0 m-0 h-px w-px appearance-none focus:shadow-none focus:outline-none'
                     }
                     style={{
                       marginRight: 0,

packages/web/src/javascripts/Components/ChangeEditor/ChangeEditorMenu.tsx

@@ -198,7 +198,7 @@ const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({
 
   return (
     <>
-      <Menu className="pt-0.5 pb-1" a11yLabel="Change note type menu" isOpen={isVisible}>
+      <Menu className="pb-1 pt-0.5" a11yLabel="Change note type menu" isOpen={isVisible}>
         {groups
           .filter((group) => group.items && group.items.length)
           .map((group, index) => {
@@ -225,7 +225,7 @@ const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({
                             {group.icon && <Icon type={group.icon} className={`mr-2 ${group.iconClassName}`} />}
                             {menuItem.uiFeature.displayName}
                             {menuItem.isLabs && (
-                              <Pill className="py-0.5 px-1.5" style="success">
+                              <Pill className="px-1.5 py-0.5" style="success">
                                 Labs
                               </Pill>
                             )}

packages/web/src/javascripts/Components/ChangeEditor/ChangeEditorMultipleMenu.tsx

@@ -153,7 +153,7 @@ const ChangeEditorMultipleMenu = ({ application, notes, setDisableClickOutside }
                         {group.icon && <Icon type={group.icon} className={`mr-2 ${group.iconClassName}`} />}
                         {item.uiFeature.displayName}
                         {item.isLabs && (
-                          <Pill className="py-0.5 px-1.5" style="success">
+                          <Pill className="px-1.5 py-0.5" style="success">
                             Labs
                           </Pill>
                         )}

packages/web/src/javascripts/Components/Checkbox/CheckIndicator.tsx

@@ -15,7 +15,7 @@ const CheckIndicator = ({ checked, className, ...props }: { checked: boolean } &
     {checked && (
       <Icon
         type="check"
-        className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-info-contrast"
+        className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-info-contrast"
         size="small"
       />
     )}

packages/web/src/javascripts/Components/ClipperView/ClipperView.tsx

@@ -414,7 +414,7 @@ const ClipperView = ({
           <Icon type="user" className="mx-2" />
           <div className="flex-grow py-2 text-sm font-semibold">{user.email}</div>
           <button
-            className="flex-shrink-0 border-l border-border py-2 px-2 hover:bg-info-backdrop focus:bg-info-backdrop focus:shadow-none focus:outline-none"
+            className="flex-shrink-0 border-l border-border px-2 py-2 hover:bg-info-backdrop focus:bg-info-backdrop focus:shadow-none focus:outline-none"
             onClick={showSignOutConfirmation}
           >
             <Icon type="signOut" className="text-neutral" />

packages/web/src/javascripts/Components/ComponentView/IsDeprecated.tsx

@@ -9,7 +9,7 @@ type Props = {
 const IsDeprecated: FunctionComponent<Props> = ({ deprecationMessage, dismissDeprecationMessage }) => {
   return (
     <div className={'sn-component'}>
-      <div className="flex min-h-[1.625rem] w-full select-none items-center justify-between border-b border-border bg-contrast py-2.5 px-2 text-text">
+      <div className="flex min-h-[1.625rem] w-full select-none items-center justify-between border-b border-border bg-contrast px-2 py-2.5 text-text">
         <div className={'left'}>
           <div className={'sk-app-bar-item'}>
             <div className="text-xs font-bold text-warning">

packages/web/src/javascripts/Components/ComponentView/IssueOnLoading.tsx

@@ -9,7 +9,7 @@ type Props = {
 const IssueOnLoading: FunctionComponent<Props> = ({ componentName, reloadIframe }) => {
   return (
     <div className={'sn-component'}>
-      <div className="flex min-h-[1.625rem] w-full select-none items-center justify-between border-b border-border bg-contrast py-2.5 px-2 text-text">
+      <div className="flex min-h-[1.625rem] w-full select-none items-center justify-between border-b border-border bg-contrast px-2 py-2.5 text-text">
         <div className={'left'}>
           <div className={'sk-app-bar-item'}>
             <div className={'sk-label.warning'}>There was an issue loading {componentName}.</div>

packages/web/src/javascripts/Components/ComponentView/NotEntitledBanner.tsx

@@ -38,7 +38,7 @@ const NotEntitledBanner: FunctionComponent<Props> = ({ featureStatus, feature })
 
   return (
     <div className={'sn-component'}>
-      <div className="flex min-h-[1.625rem] w-full select-none items-center justify-between border-b border-border bg-contrast py-2.5 px-2 text-text">
+      <div className="flex min-h-[1.625rem] w-full select-none items-center justify-between border-b border-border bg-contrast px-2 py-2.5 text-text">
         <div className={'left'}>
           <div className="flex items-start">
             <div className="mt-1">

packages/web/src/javascripts/Components/ContentListView/Calendar/Calendar.tsx

@@ -34,7 +34,7 @@ const Calendar: FunctionComponent<Props> = ({ activities, startDate, onDateSelec
 
   return (
     <div className={`w-300 ${className} min-h-[210px]`}>
-      <div className="mr-auto ml-auto w-70">
+      <div className="ml-auto mr-auto w-70">
         <div className="flex w-full flex-wrap">
           {CalendarDaysOfTheWeek.map((d) => (
             <div className={'flex h-8 w-[14.2%] items-center justify-center'} key={d}>

packages/web/src/javascripts/Components/ContentListView/Calendar/InfiniteCalendar.tsx

@@ -184,7 +184,7 @@ const InfiniteCalendar = forwardRef<InfiniteCalendarInterface, Props>(
         <div
           onClick={toggleVisibility}
           className={classNames(
-            'text-md flex cursor-pointer items-center justify-center py-2 px-4',
+            'text-md flex cursor-pointer items-center justify-center px-4 py-2',
             'text-center font-bold hover:bg-contrast',
           )}
         >

packages/web/src/javascripts/Components/ContentListView/Daily/DailyItemCell.tsx

@@ -56,7 +56,7 @@ export const DailyItemCell = forwardRef(
         }`}
         id={section.id}
       >
-        <div className="min-w-0 flex-grow border-b border-solid border-border py-4 px-4">
+        <div className="min-w-0 flex-grow border-b border-solid border-border px-4 py-4">
           <div className="flex items-start overflow-hidden text-base">
             <DaySquare weekday={section.weekday} hasActivity={item != undefined} day={section.day} />
 

packages/web/src/javascripts/Components/ContentListView/EmptyFilesView.tsx

@@ -9,7 +9,7 @@ const EmptyFilesView = ({ addNewItem }: Props) => {
   return (
     <div className="flex h-full w-full flex-col items-center justify-center">
       <FilesIllustration className="h-32 w-32" />
-      <div className="mt-4 mb-2 text-lg font-bold">You don't have any files yet</div>
+      <div className="mb-2 mt-4 text-lg font-bold">You don't have any files yet</div>
       <div className="mb-4 max-w-[35ch] text-center text-sm text-passive-0">
         Files attached to your notes appear here. You can also upload files directly from this page.
       </div>

packages/web/src/javascripts/Components/ContentListView/FileListItem.tsx

@@ -97,7 +97,7 @@ const FileListItemCard: FunctionComponent<DisplayableListItemProps<FileItem>> =
       ) : (
         <div className="pr-4" />
       )}
-      <div className="min-w-0 flex-grow border-b border-solid border-border py-4 px-0">
+      <div className="min-w-0 flex-grow border-b border-solid border-border px-0 py-4">
         <div className="flex items-start justify-between overflow-hidden text-base font-semibold leading-[1.3]">
           <div className="break-word mr-2">{file.title}</div>
         </div>

packages/web/src/javascripts/Components/ContentListView/FileListItemCard.tsx

@@ -100,9 +100,9 @@ const FileListItemCard: FunctionComponent<DisplayableListItemProps<FileItem>> =
           ) : (
             <div className="pr-4" />
           )}
-          <div className="min-w-0 flex-grow py-4 px-0">
+          <div className="min-w-0 flex-grow px-0 py-4">
             <div className="line-clamp-2 overflow-hidden text-editor font-semibold">
-              <div className="break-word line-clamp-2 mr-2 overflow-hidden">{file.title}</div>
+              <div className="break-word mr-2 line-clamp-2 overflow-hidden">{file.title}</div>
             </div>
             <ListItemMetadata item={file} hideDate={hideDate} sortBy={sortBy} />
             <ListItemTags hideTags={hideTags} tags={tags} />

packages/web/src/javascripts/Components/ContentListView/Header/DisplayOptionsMenu.tsx

@@ -54,7 +54,7 @@ const TabButton: FunctionComponent<{
   return (
     <button
       className={classNames(
-        'relative cursor-pointer rounded-full border-2 border-solid border-transparent py-1 px-2 text-mobile-menu-item focus:shadow-none md:py-0 lg:text-sm',
+        'relative cursor-pointer rounded-full border-2 border-solid border-transparent px-2 py-1 text-mobile-menu-item focus:shadow-none md:py-0 lg:text-sm',
         isSelected
           ? 'bg-info text-info-contrast'
           : 'bg-transparent text-text hover:bg-info-backdrop focus:bg-info-backdrop',
@@ -305,7 +305,7 @@ const DisplayOptionsMenu: FunctionComponent<DisplayOptionsMenuProps> = ({
 
       {controlsDisabled && (
         <NoSubscriptionBanner
-          className="m-2 mt-2 mb-3"
+          className="m-2 mb-3 mt-2"
           application={application}
           title="Upgrade for per-tag preferences"
           message={
@@ -441,7 +441,7 @@ const DisplayOptionsMenu: FunctionComponent<DisplayOptionsMenuProps> = ({
             <div className="flex flex-col pr-5">
               <div className="flex flex-row items-center">
                 <div className="text-base font-semibold uppercase text-text lg:text-xs">Daily Notebook</div>
-                <Pill className="py-0 px-1.5" style="success">
+                <Pill className="px-1.5 py-0" style="success">
                   Labs
                 </Pill>
               </div>
@@ -463,7 +463,7 @@ const DisplayOptionsMenu: FunctionComponent<DisplayOptionsMenuProps> = ({
             <div className="flex flex-col pr-5">
               <div className="flex flex-row items-center">
                 <div className="text-base font-semibold uppercase text-text lg:text-xs">Table view</div>
-                <Pill className="py-0 px-1.5" style="success">
+                <Pill className="px-1.5 py-0" style="success">
                   Labs
                 </Pill>
               </div>

packages/web/src/javascripts/Components/ContentListView/ListItemConflictIndicator.tsx

@@ -10,7 +10,7 @@ type Props = {
 const ListItemConflictIndicator: FunctionComponent<Props> = ({ item }) => {
   return item.conflictOf ? (
     <div className="mt-0.5 flex flex-wrap items-center">
-      <div className={'mr-1 mt-2 rounded bg-danger py-1 px-1.5 text-danger-contrast'}>
+      <div className={'mr-1 mt-2 rounded bg-danger px-1.5 py-1 text-danger-contrast'}>
         <div className="text-center text-xs font-bold">Conflicted Copy</div>
       </div>
     </div>

packages/web/src/javascripts/Components/ContentListView/ListItemTags.tsx

@@ -17,7 +17,7 @@ const ListItemTags: FunctionComponent<Props> = ({ hideTags, tags }) => {
     <div className="mt-1.5 flex flex-wrap gap-2 overflow-hidden text-sm lg:text-xs">
       {tags.map((tag) => (
         <span
-          className="inline-flex items-center rounded-sm bg-passive-4-opacity-variant py-1 px-1.5 text-foreground"
+          className="inline-flex items-center rounded-sm bg-passive-4-opacity-variant px-1.5 py-1 text-foreground"
           key={tag.uuid}
         >
           <Icon type={tag.iconString} className="mr-1 text-passive-1" size="small" />

packages/web/src/javascripts/Components/ContentListView/ListItemVaultInfo.tsx

@@ -32,7 +32,7 @@ const ListItemVaultInfo: FunctionComponent<Props> = ({ item }) => {
       <VaultNameBadge vault={vault} />
 
       {sharedByContact && (
-        <div title="Shared by contact" className={'mt-2 rounded bg-info py-1 px-1.5 text-neutral-contrast'}>
+        <div title="Shared by contact" className={'mt-2 rounded bg-info px-1.5 py-1 text-neutral-contrast'}>
           <span className="flex items-center" title="Shared by contact">
             <Icon ariaLabel="Shared by contact" type="archive" className="mr-1 text-info-contrast" size="medium" />
             <div className="text-center text-xs font-bold">{sharedByContact?.name}</div>

packages/web/src/javascripts/Components/ContentListView/NoteListItem.tsx

@@ -142,7 +142,7 @@ const NoteListItem: FunctionComponent<DisplayableListItemProps<SNNote>> = ({
       ) : (
         <div className="pr-4" />
       )}
-      <div className={`min-w-0 flex-grow ${hasOffsetBorder && 'border-b border-solid border-border'} py-4 px-0`}>
+      <div className={`min-w-0 flex-grow ${hasOffsetBorder && 'border-b border-solid border-border'} px-0 py-4`}>
         <ListItemTitle item={item} />
         <ListItemNotePreviewText item={item} hidePreview={hidePreview} />
         <ListItemMetadata item={item} hideDate={hideDate} sortBy={sortBy} />

packages/web/src/javascripts/Components/Dropdown/Dropdown.tsx

@@ -62,7 +62,7 @@ const Dropdown = ({
       </VisuallyHidden>
       <Select
         className={classNames(
-          'flex w-full min-w-55 items-center justify-between rounded border border-border bg-default py-1.5 px-3.5 text-sm text-foreground',
+          'flex w-full min-w-55 items-center justify-between rounded border border-border bg-default px-3.5 py-1.5 text-sm text-foreground',
           disabled && 'opacity-50',
           classNameOverride.button,
           !fullWidth && 'md:w-fit',
@@ -90,7 +90,7 @@ const Dropdown = ({
       >
         {items.map((item) => (
           <SelectItem
-            className="flex cursor-pointer items-center bg-transparent py-1.5 px-3 text-sm text-text hover:bg-contrast hover:text-foreground [&[data-active-item]]:bg-info [&[data-active-item]]:text-info-contrast"
+            className="flex cursor-pointer items-center bg-transparent px-3 py-1.5 text-sm text-text hover:bg-contrast hover:text-foreground [&[data-active-item]]:bg-info [&[data-active-item]]:text-info-contrast"
             key={item.value}
             value={item.value}
             disabled={item.disabled}

packages/web/src/javascripts/Components/EditorWidthSelectionModal/EditorWidthSelectionModal.tsx

@@ -17,8 +17,8 @@ const DoubleSidedArrow = ({ className }: { className?: string }) => {
     <div
       className={classNames(
         'relative h-[2px] w-full bg-current',
-        'before:absolute before:-left-px before:top-1/2 before:h-0 before:w-0 before:-translate-y-1/2 before:border-r-[6px] before:border-t-[6px] before:border-b-[6px] before:border-current before:border-b-transparent before:border-t-transparent',
+        'before:absolute before:-left-px before:top-1/2 before:h-0 before:w-0 before:-translate-y-1/2 before:border-b-[6px] before:border-r-[6px] before:border-t-[6px] before:border-current before:border-b-transparent before:border-t-transparent',
-        'after:absolute after:-right-px after:top-1/2 after:h-0 after:w-0 after:-translate-y-1/2 after:border-l-[6px] after:border-t-[6px] after:border-b-[6px] after:border-current after:border-b-transparent after:border-t-transparent',
+        'after:absolute after:-right-px after:top-1/2 after:h-0 after:w-0 after:-translate-y-1/2 after:border-b-[6px] after:border-l-[6px] after:border-t-[6px] after:border-current after:border-b-transparent after:border-t-transparent',
         className,
       )}
     />

packages/web/src/javascripts/Components/FileContextMenu/FileMenuOptions.tsx

@@ -142,7 +142,7 @@ const FileMenuOptions: FunctionComponent<Props> = ({
       <FileContextMenuBackupOption file={selectedFiles[0]} />
 
       <HorizontalSeparator classes="my-2" />
-      <div className="px-3 pt-1 pb-0.5 text-xs font-medium text-neutral">
+      <div className="px-3 pb-0.5 pt-1 text-xs font-medium text-neutral">
         {!hasSelectedMultipleFiles && (
           <div className="mb-1">
             <span className="font-semibold">File ID:</span> {selectedFiles[0].uuid}

packages/web/src/javascripts/Components/FilePreview/FilePreviewModal.tsx

@@ -259,7 +259,7 @@ const FilePreviewModal = observer(({ application, viewControllerManager }: Props
           </div>
         </div>
         {showLinkedBubblesContainer && (
-          <div className="-mt-1 min-h-0 flex-shrink-0 border-b border-border py-1.5 px-3.5">
+          <div className="-mt-1 min-h-0 flex-shrink-0 border-b border-border px-3.5 py-1.5">
             <LinkedItemBubblesContainer
               linkingController={viewControllerManager.linkingController}
               item={currentFile}

packages/web/src/javascripts/Components/FilePreview/ImagePreview.tsx

@@ -81,7 +81,7 @@ const ImagePreview: FunctionComponent<Props> = ({
       <div
         className={classNames(
           isEmbeddedInSuper ? 'hidden focus-within:flex group-hover:flex' : '',
-          'absolute left-1/2 bottom-6 flex -translate-x-1/2 items-center rounded border border-solid border-border bg-default py-1 px-3',
+          'absolute bottom-6 left-1/2 flex -translate-x-1/2 items-center rounded border border-solid border-border bg-default px-3 py-1',
         )}
       >
         <span className="mr-1.5">{isEmbeddedInSuper ? 'Size' : 'Zoom'}:</span>
@@ -127,7 +127,7 @@ const ImagePreview: FunctionComponent<Props> = ({
           </div>
         ) : (
           <button
-            className="mx-1 rounded py-1 px-1.5 hover:bg-contrast"
+            className="mx-1 rounded px-1.5 py-1 hover:bg-contrast"
             onClick={() => setIsZoomInputVisible((visible) => !visible)}
           >
             {imageZoomPercent}%

packages/web/src/javascripts/Components/Footer/PreferencesButton.tsx

@@ -42,7 +42,7 @@ const PreferencesButton = ({ openPreferences }: Props) => {
         <div className="h-5">
           <Icon type="tune" className="rounded hover:text-info" />
         </div>
-        {isChangelogUnread && <div className="absolute top-0.5 right-0.5 h-2 w-2 rounded-full bg-info" />}
+        {isChangelogUnread && <div className="absolute right-0.5 top-0.5 h-2 w-2 rounded-full bg-info" />}
       </button>
     </StyledTooltip>
   )

packages/web/src/javascripts/Components/Footer/UpgradeNow.tsx

@@ -30,7 +30,7 @@ const UpgradeNow = ({ application, featuresController, subscriptionContoller }:
   return (
     <div className="flex h-full items-center px-2">
       <button
-        className="rounded bg-info py-0.5 px-1.5 text-sm font-bold uppercase text-info-contrast hover:brightness-125 lg:text-xs"
+        className="rounded bg-info px-1.5 py-0.5 text-sm font-bold uppercase text-info-contrast hover:brightness-125 lg:text-xs"
         onClick={onClick}
       >
         {!hasAccount ? 'Sign up to sync' : 'Unlock features'}

packages/web/src/javascripts/Components/ImportModal/ImportModalFileItem.tsx

@@ -78,7 +78,7 @@ const ImportModalFileItem = ({
   return (
     <div
       className={classNames(
-        'flex gap-2 py-2 px-2',
+        'flex gap-2 px-2 py-2',
         file.service == null ? 'flex-col items-start md:flex-row md:items-center' : 'items-center',
       )}
     >

packages/web/src/javascripts/Components/ImportModal/InitialPage.tsx

@@ -36,9 +36,9 @@ const ImportModalInitialPage = ({ setFiles }: Props) => {
         <div className="text-lg font-semibold">Drag and drop files to auto-detect and import</div>
         <div className="text-sm">Or click to open file picker</div>
       </button>
-      <div className="relative mt-6 mb-6 w-full">
+      <div className="relative mb-6 mt-6 w-full">
         <hr className="w-full border-border" />
-        <div className="absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 bg-default p-1">
+        <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-default p-1">
           or import from:
         </div>
       </div>

packages/web/src/javascripts/Components/ItemSelectionDropdown/ItemSelectionDropdown.tsx

@@ -69,7 +69,7 @@ const ItemSelectionDropdown = ({ contentTypes, placeholder, onSelection, combobo
           items.map((item) => (
             <ComboboxItem
               key={item.uuid}
-              className="flex w-full cursor-pointer items-center justify-between gap-4 overflow-hidden py-2 px-3 hover:bg-contrast hover:text-foreground [&[data-active-item]]:bg-info-backdrop"
+              className="flex w-full cursor-pointer items-center justify-between gap-4 overflow-hidden px-3 py-2 hover:bg-contrast hover:text-foreground [&[data-active-item]]:bg-info-backdrop"
               hideOnClick
               onClick={() => {
                 combobox.setValue('')

packages/web/src/javascripts/Components/LinkedItems/ItemLinkAutocompleteInput.tsx

@@ -113,7 +113,7 @@ const ItemLinkAutocompleteInput = forwardRef(
               return (
                 <ComboboxItem
                   key={result.uuid}
-                  className="flex w-full cursor-pointer items-center justify-between gap-4 overflow-hidden py-2 px-3 hover:bg-contrast hover:text-foreground [&[data-active-item]]:bg-info-backdrop"
+                  className="flex w-full cursor-pointer items-center justify-between gap-4 overflow-hidden px-3 py-2 hover:bg-contrast hover:text-foreground [&[data-active-item]]:bg-info-backdrop"
                   hideOnClick
                   onClick={() => {
                     linkItems(item, result).catch(console.error)

packages/web/src/javascripts/Components/LinkedItems/LinkedItemBubble.tsx

@@ -130,7 +130,7 @@ const LinkedItemBubble = ({
         <a
           ref={unlinkButtonRef}
           role="button"
-          className="ml-2 -mr-1 flex cursor-pointer border-0 bg-transparent p-0"
+          className="-mr-1 ml-2 flex cursor-pointer border-0 bg-transparent p-0"
           onClick={onUnlinkClick}
         >
           <Icon type="close" className="text-neutral hover:text-info" size="small" />

packages/web/src/javascripts/Components/LinkedItems/LinkedItemSearchResults.tsx

@@ -44,7 +44,7 @@ const LinkedItemSearchResults = ({
         return (
           <button
             key={result.uuid}
-            className="flex w-full items-center justify-between gap-4 overflow-hidden py-2 px-3 hover:bg-contrast hover:text-foreground focus:bg-info-backdrop"
+            className="flex w-full items-center justify-between gap-4 overflow-hidden px-3 py-2 hover:bg-contrast hover:text-foreground focus:bg-info-backdrop"
             onClick={() => {
               void linkItems(item, result)
               onClickCallback?.()

packages/web/src/javascripts/Components/LinkedItems/LinkedItemSearchResultsAddTagOption.tsx

@@ -13,7 +13,7 @@ export const LinkedItemSearchResultsAddTagOption = forwardRef(
     return (
       <button
         className={classNames(
-          'group flex w-full items-center gap-2 overflow-hidden py-2 px-3 hover:bg-contrast hover:text-foreground',
+          'group flex w-full items-center gap-2 overflow-hidden px-3 py-2 hover:bg-contrast hover:text-foreground',
           'focus:bg-info-backdrop [&[data-active-item]]:bg-info-backdrop',
           isFocused ? 'bg-info-backdrop text-foreground' : '',
         )}

packages/web/src/javascripts/Components/LinkedItems/LinkedItemsPanel.tsx

@@ -70,7 +70,7 @@ const LinkedItemsPanel = ({
       >
         <DecoratedInput
           type="text"
-          className={{ container: !isSearching ? 'py-1.5 px-0.5' : 'py-0', input: 'placeholder:text-passive-0' }}
+          className={{ container: !isSearching ? 'px-0.5 py-1.5' : 'py-0', input: 'placeholder:text-passive-0' }}
           placeholder="Search items to link..."
           value={searchQuery}
           onChange={setSearchQuery}
@@ -92,7 +92,7 @@ const LinkedItemsPanel = ({
           <>
             {(!!unlinkedItems.length || shouldShowCreateTag) && (
               <div>
-                <div className="mt-3 mb-1 px-3 text-menu-item font-semibold uppercase text-passive-0">Unlinked</div>
+                <div className="mb-1 mt-3 px-3 text-menu-item font-semibold uppercase text-passive-0">Unlinked</div>
                 <LinkedItemSearchResults
                   createAndAddNewTag={createAndAddNewTag}
                   linkItems={linkItems}
@@ -110,7 +110,7 @@ const LinkedItemsPanel = ({
             )}
             {!!linkedResults.length && (
               <div>
-                <div className="mt-3 mb-1 px-3 text-menu-item font-semibold uppercase text-passive-0">Linked</div>
+                <div className="mb-1 mt-3 px-3 text-menu-item font-semibold uppercase text-passive-0">Linked</div>
                 <div className="my-1">
                   {linkedResults.map((link) => (
                     <LinkedItemsSectionItem
@@ -130,7 +130,7 @@ const LinkedItemsPanel = ({
           <>
             {!!tagsLinkedToItem.length && (
               <div>
-                <div className="mt-3 mb-1 px-3 text-menu-item font-semibold uppercase text-passive-0">Linked Tags</div>
+                <div className="mb-1 mt-3 px-3 text-menu-item font-semibold uppercase text-passive-0">Linked Tags</div>
                 <div className="my-1">
                   {tagsLinkedToItem.map((link) => (
                     <LinkedItemsSectionItem
@@ -147,7 +147,7 @@ const LinkedItemsPanel = ({
             )}
 
             <div>
-              <div className="mt-3 mb-1 px-3 text-menu-item font-semibold uppercase text-passive-0">Linked Files</div>
+              <div className="mb-1 mt-3 px-3 text-menu-item font-semibold uppercase text-passive-0">Linked Files</div>
               <div className="my-1">
                 <button
                   className="flex w-full cursor-pointer items-center gap-3 bg-transparent px-3 py-2 text-left text-base text-text hover:bg-info-backdrop hover:text-foreground focus:bg-info-backdrop focus:shadow-none md:text-sm"
@@ -171,7 +171,7 @@ const LinkedItemsPanel = ({
 
             {!!filesLinkingToItem.length && (
               <div>
-                <div className="mt-3 mb-1 px-3 text-menu-item font-semibold uppercase text-passive-0">
+                <div className="mb-1 mt-3 px-3 text-menu-item font-semibold uppercase text-passive-0">
                   Files Linking To Current File
                 </div>
                 <div className="my-1">
@@ -190,7 +190,7 @@ const LinkedItemsPanel = ({
             )}
             {!!notesLinkedToItem.length && (
               <div>
-                <div className="mt-3 mb-1 px-3 text-menu-item font-semibold uppercase text-passive-0">Linked Notes</div>
+                <div className="mb-1 mt-3 px-3 text-menu-item font-semibold uppercase text-passive-0">Linked Notes</div>
                 <div className="my-1">
                   {notesLinkedToItem.map((link) => (
                     <LinkedItemsSectionItem
@@ -207,7 +207,7 @@ const LinkedItemsPanel = ({
             )}
             {!!notesLinkingToItem.length && (
               <div>
-                <div className="mt-3 mb-1 px-3 text-menu-item font-semibold uppercase text-passive-0">
+                <div className="mb-1 mt-3 px-3 text-menu-item font-semibold uppercase text-passive-0">
                   Notes Linking To This Note
                 </div>
                 <div className="my-1">

packages/web/src/javascripts/Components/Menu/MenuRadioButtonItem.tsx

@@ -47,7 +47,7 @@ const Tooltip = ({ text }: { text: string }) => {
         disableMobileFullscreenTakeover
         className={classNames(
           'w-60 translate-x-2 translate-y-1 select-none rounded border border-border shadow-main',
-          'z-modal bg-default py-1.5 px-3 text-left',
+          'z-modal bg-default px-3 py-1.5 text-left',
         )}
       >
         {text}

packages/web/src/javascripts/Components/Modal/MobileModalAction.tsx

@@ -14,7 +14,7 @@ const MobileModalAction = forwardRef(
       <button
         ref={ref}
         className={classNames(
-          'flex select-none whitespace-nowrap py-1 px-1 text-base font-semibold focus:shadow-none focus:outline-none active:shadow-none active:outline-none active:brightness-50 disabled:text-neutral md:hidden',
+          'flex select-none whitespace-nowrap px-1 py-1 text-base font-semibold focus:shadow-none focus:outline-none active:shadow-none active:outline-none active:brightness-50 disabled:text-neutral md:hidden',
           slot === 'left' ? 'justify-start text-left' : 'justify-end text-right',
           type === 'cancel' || type === 'destructive' ? 'text-danger' : 'text-info',
           className,

packages/web/src/javascripts/Components/Modal/Modal.tsx

@@ -115,7 +115,7 @@ const Modal = ({
           <div
             className={classNames(
               'flex w-full flex-shrink-0 select-none items-center justify-between rounded-t border-b border-solid border-border bg-default px-2 text-text md:px-4.5 md:py-3',
-              hasTopInset ? 'pt-safe-top pb-1.5' : 'py-1.5',
+              hasTopInset ? 'pb-1.5 pt-safe-top' : 'py-1.5',
             )}
           >
             <MobileModalHeader className="flex-row items-center justify-between md:flex md:gap-0">
@@ -201,7 +201,7 @@ const Modal = ({
           : sortedActions.length > 0 && (
               <div
                 className={classNames(
-                  'hidden items-center justify-start gap-3 border-t border-border py-2 px-2.5 md:flex md:px-4 md:py-4',
+                  'hidden items-center justify-start gap-3 border-t border-border px-2.5 py-2 md:flex md:px-4 md:py-4',
                   hasBottomInset && 'pb-safe-bottom',
                 )}
               >

packages/web/src/javascripts/Components/Modal/ModalOverlay.tsx

@@ -43,7 +43,7 @@ const ModalOverlay = forwardRef(
     return (
       <Dialog
         tabIndex={0}
-        className="fixed top-0 left-0 z-modal h-full w-full"
+        className="fixed left-0 top-0 z-modal h-full w-full"
         ref={mergeRefs([setElement, addCloseMethod, ref])}
         store={dialog}
         modal={false}

packages/web/src/javascripts/Components/NoSubscriptionBanner/NoSubscriptionBanner.tsx

@@ -26,7 +26,7 @@ const NoSubscriptionBanner = ({
   return (
     <div className={classNames('grid grid-cols-1 rounded-md border border-border p-4', className)}>
       <div className="flex items-center">
-        <Icon className={classNames('mr-1 -ml-1 h-5 w-5', PremiumFeatureIconClass)} type={PremiumFeatureIconName} />
+        <Icon className={classNames('-ml-1 mr-1 h-5 w-5', PremiumFeatureIconClass)} type={PremiumFeatureIconName} />
         <h1 className="sk-h3 m-0 text-sm font-semibold">{title}</h1>
       </div>
       <p className="col-start-1 col-end-3 m-0 mt-1 text-sm">{message}</p>

packages/web/src/javascripts/Components/NoteView/CollaborationInfoHUD.tsx

@@ -28,13 +28,13 @@ const CollaborationInfoHUD: FunctionComponent<Props> = ({ item }) => {
 
   return (
     <div className="flex flex-wrap items-start gap-2">
-      <div title="Vault name" className={'flex rounded bg-success py-1 px-1.5 text-success-contrast'}>
+      <div title="Vault name" className={'flex rounded bg-success px-1.5 py-1 text-success-contrast'}>
         <Icon ariaLabel="Shared in vault" type="safe-square" className="mr-1 text-info-contrast" size="medium" />
         <span className="mr-auto overflow-hidden text-ellipsis text-xs">{vault.name}</span>
       </div>
 
       {lastEditedBy && (
-        <div title="Last edited by" className={'flex rounded bg-info py-1 px-1.5 text-info-contrast'}>
+        <div title="Last edited by" className={'flex rounded bg-info px-1.5 py-1 text-info-contrast'}>
           <Icon ariaLabel="Shared by" type="pencil" className="mr-1 text-info-contrast" size="medium" />
           <span className="mr-auto overflow-hidden text-ellipsis text-xs">{lastEditedBy?.name}</span>
         </div>

packages/web/src/javascripts/Components/NoteView/NoteConflictResolutionModal/DiffView.tsx

@@ -121,7 +121,7 @@ export const DiffView = ({
         ))}
       </pre>
       {hasOverflow && (
-        <div className="absolute top-0 right-0 z-[-1] h-full w-[19px] border-l border-border" ref={setDiffVisualizer} />
+        <div className="absolute right-0 top-0 z-[-1] h-full w-[19px] border-l border-border" ref={setDiffVisualizer} />
       )}
     </div>
   )

packages/web/src/javascripts/Components/NoteView/NoteConflictResolutionModal/NoteConflictResolutionModal.tsx

@@ -194,11 +194,11 @@ const NoteConflictResolutionModal = ({
               ref={setSelectAnchor}
               render={
                 <ToolbarItem
-                  className="relative rounded rounded-l-none bg-info py-1.5 px-3 ring-info hover:brightness-110 focus:ring-0 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-default focus-visible:brightness-110"
+                  className="relative rounded rounded-l-none bg-info px-3 py-1.5 ring-info hover:brightness-110 focus:ring-0 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-default focus-visible:brightness-110"
                   disabled={isPerformingAction}
                 >
                   <SelectArrow className="block rotate-180" />
-                  <div className="absolute top-0 left-0 h-full w-[2px] bg-info brightness-[.85]" />
+                  <div className="absolute left-0 top-0 h-full w-[2px] bg-info brightness-[.85]" />
                 </ToolbarItem>
               }
               store={selectStore}
@@ -342,7 +342,7 @@ const NoteConflictResolutionModal = ({
                 <div className="relative rounded-full p-1 hover:bg-contrast">
                   <Icon type={shouldSyncComparisonScroll ? 'link' : 'link-off'} className="text-neutral" />
                   <Checkbox
-                    className="absolute top-0 left-0 right-0 bottom-0 cursor-pointer opacity-0"
+                    className="absolute bottom-0 left-0 right-0 top-0 cursor-pointer opacity-0"
                     checked={shouldSyncComparisonScroll}
                     onChange={() => setShouldSyncComparisonScroll((shouldSync) => !shouldSync)}
                   />

packages/web/src/javascripts/Components/NoteView/NoteStatusIndicator.tsx

@@ -42,8 +42,8 @@ const IndicatorWithTooltip = ({
       id={ElementIds.NoteStatusTooltip}
       className={classNames(
         isTooltipVisible ? '' : 'hidden',
-        'absolute top-full right-0 min-w-[90vw] translate-x-2 translate-y-1 select-none rounded border border-border',
+        'absolute right-0 top-full min-w-[90vw] translate-x-2 translate-y-1 select-none rounded border border-border',
-        'bg-default py-1.5 px-3 text-left peer-hover:block peer-focus:block md:min-w-max',
+        'bg-default px-3 py-1.5 text-left peer-hover:block peer-focus:block md:min-w-max',
       )}
     >
       {children}

packages/web/src/javascripts/Components/NoteView/NoteView.tsx

@@ -979,7 +979,7 @@ class NoteView extends AbstractComponent<NoteViewProps, State> {
         >
           {editorMode === 'component' && this.state.editorComponentViewer && (
             <div className="component-view relative flex-grow">
-              {this.state.paneGestureEnabled && <div className="absolute top-0 left-0 h-full w-[20px] md:hidden" />}
+              {this.state.paneGestureEnabled && <div className="absolute left-0 top-0 h-full w-[20px] md:hidden" />}
               <IframeFeatureView
                 key={this.state.editorComponentViewer.identifier}
                 componentViewer={this.state.editorComponentViewer}

packages/web/src/javascripts/Components/NoteView/NoteViewFileDropTarget.tsx

@@ -41,7 +41,7 @@ const NoteViewFileDropTarget = ({ note, linkingController, noteViewElement, file
 
   return isDraggingFiles ? (
     // Required to block drag events to editor iframe
-    <div id="file-drag-iframe-overlay" className="absolute top-0 left-0 z-dropdown-menu h-full w-full" />
+    <div id="file-drag-iframe-overlay" className="absolute left-0 top-0 z-dropdown-menu h-full w-full" />
   ) : null
 }
 

packages/web/src/javascripts/Components/NoteView/ReadonlyNoteContent.tsx

@@ -115,7 +115,7 @@ export const ReadonlyNoteContent = ({
               onScroll={onScroll}
             />
           ) : (
-            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-passive-0">
+            <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-passive-0">
               Empty note.
             </div>
           )}

packages/web/src/javascripts/Components/Popover/MobilePopoverContent.tsx

@@ -50,11 +50,11 @@ const MobilePopoverContent = ({
       <DisableScroll />
       <div
         ref={mergeRefs([setPopoverElement, addCloseMethod])}
-        className="fixed top-0 left-0 z-modal flex h-full w-full flex-col bg-default pt-safe-top pb-safe-bottom"
+        className="fixed left-0 top-0 z-modal flex h-full w-full flex-col bg-default pb-safe-bottom pt-safe-top"
         data-popover={id}
         data-mobile-popover
       >
-        <MobileModalHeader className="border-b border-border py-1.5 px-2 text-base">
+        <MobileModalHeader className="border-b border-border px-2 py-1.5 text-base">
           <div />
           <div className="flex items-center justify-center font-semibold">{title}</div>
           <MobileModalAction type="primary" slot="right" action={requestClose}>

packages/web/src/javascripts/Components/Popover/PositionedPopoverContent.tsx

@@ -86,11 +86,11 @@ const PositionedPopoverContent = ({
     <Portal disabled={!portal}>
       <div
         className={classNames(
-          'absolute top-0 left-0 flex w-full min-w-80 cursor-auto flex-col',
+          'absolute left-0 top-0 flex w-full min-w-80 cursor-auto flex-col',
           'overflow-y-auto rounded border border-[--menu-border-color] bg-default shadow-main md:h-auto md:max-w-xs',
           !disableMobileFullscreenTakeover && 'h-full',
           overrideZIndex ? overrideZIndex : 'z-dropdown-menu',
-          !isDesktopScreen && !disableMobileFullscreenTakeover ? 'pt-safe-top pb-safe-bottom' : '',
+          !isDesktopScreen && !disableMobileFullscreenTakeover ? 'pb-safe-bottom pt-safe-top' : '',
           isDesktopScreen || disableMobileFullscreenTakeover ? 'invisible' : '',
           className,
         )}

packages/web/src/javascripts/Components/Preferences/Panes/Account/Files.tsx

@@ -52,7 +52,7 @@ const FilesSection: FunctionComponent<Props> = ({ application }) => {
           </div>
         ) : (
           <>
-            <div className="mt-1 mb-1">
+            <div className="mb-1 mt-1">
               <span className="font-semibold">{formatSizeToReadableString(filesQuotaUsed)}</span> of{' '}
               <span>{application.isThirdPartyHostUsed() ? '∞' : formatSizeToReadableString(filesQuotaTotal)}</span> used
             </div>

packages/web/src/javascripts/Components/Preferences/Panes/Account/NoProSubscription.tsx

@@ -36,7 +36,7 @@ const NoProSubscription: FunctionComponent<Props> = ({ application, text }) => {
 
       <div className="flex">
         {!application.hideOutboundSubscriptionLinks && (
-          <LinkButton className="mt-3 mr-3 min-w-20" label="Learn More" link={window.plansUrl as string} />
+          <LinkButton className="mr-3 mt-3 min-w-20" label="Learn More" link={window.plansUrl as string} />
         )}
         {application.hasAccount() && (
           <Button className="mt-3 min-w-20" primary label="Upgrade" onClick={onPurchaseClick} />

packages/web/src/javascripts/Components/Preferences/Panes/Account/Subscription/NoSubscription.tsx

@@ -34,7 +34,7 @@ const NoSubscription: FunctionComponent<Props> = ({ application }) => {
       {purchaseFlowError && <Text className="text-danger">{purchaseFlowError}</Text>}
       <div className="flex">
         {!application.hideOutboundSubscriptionLinks && (
-          <LinkButton className="mt-3 mr-3 min-w-20" label="Learn More" link={window.plansUrl as string} />
+          <LinkButton className="mr-3 mt-3 min-w-20" label="Learn More" link={window.plansUrl as string} />
         )}
         {application.hasAccount() && (
           <Button className="mt-3 min-w-20" primary label="Subscribe" onClick={onPurchaseClick} />

packages/web/src/javascripts/Components/Preferences/Panes/Account/Subscription/SubscriptionInformation.tsx

@@ -14,7 +14,7 @@ const SubscriptionInformation = () => {
   return (
     <>
       <SubscriptionStatusText />
-      <Button className="mt-3 mr-3 min-w-20" label="Manage subscription" onClick={manageSubscription} />
+      <Button className="mr-3 mt-3 min-w-20" label="Manage subscription" onClick={manageSubscription} />
     </>
   )
 }

packages/web/src/javascripts/Components/Preferences/Panes/Account/SubscriptionSharing/InvitationsList.tsx

@@ -43,14 +43,14 @@ const InvitationsList = ({ subscriptionState, application }: Props) => {
   }
 
   if (usedInvitationsCount === 0) {
-    return <Text className="mt-1 mb-3">Make your first subscription invite below.</Text>
+    return <Text className="mb-3 mt-1">Make your first subscription invite below.</Text>
   }
 
   return (
     <div>
       <SubtitleLight className="mb-2 text-info">Active Invites</SubtitleLight>
       {activeSubscriptions?.map((invitation) => (
-        <div key={invitation.uuid} className="mt-1 mb-4">
+        <div key={invitation.uuid} className="mb-4 mt-1">
           <Text>
             {invitation.inviteeIdentifier} <span className="text-info">({invitation.status})</span>
           </Text>

packages/web/src/javascripts/Components/Preferences/Panes/Appearance/EditorAppearance.tsx

@@ -125,7 +125,7 @@ const EditorDefaults = ({ application }: Props) => {
             <Text>Sets the max editor width for all notes</Text>
             <div className="mt-2">
               <button
-                className="flex w-full min-w-55 items-center justify-between rounded border border-border bg-default py-1.5 px-3.5 text-left text-base text-foreground md:w-fit lg:text-sm"
+                className="flex w-full min-w-55 items-center justify-between rounded border border-border bg-default px-3.5 py-1.5 text-left text-base text-foreground md:w-fit lg:text-sm"
                 onClick={toggleEditorWidthModal}
               >
                 {editorWidth === EditorLineWidth.FullWidth ? 'Full width' : editorWidth}

packages/web/src/javascripts/Components/Preferences/Panes/General/Advanced/OfflineSubscription.tsx

@@ -125,7 +125,7 @@ const OfflineSubscription: FunctionComponent<Props> = ({ application, onSuccess
               )}
             </div>
             {(isSuccessfullyActivated || isSuccessfullyRemoved) && (
-              <div className={'info mt-3 mb-3'}>
+              <div className={'info mb-3 mt-3'}>
                 Your offline subscription code has been successfully {isSuccessfullyActivated ? 'activated' : 'removed'}
                 .
               </div>

packages/web/src/javascripts/Components/Preferences/Panes/General/SmartViews/EditSmartViewModal.tsx

@@ -96,7 +96,7 @@ const EditSmartViewModal = ({ controller, platform }: Props) => {
           <div className="flex items-center gap-2.5">
             <div className="text-sm font-semibold">Title:</div>
             <input
-              className="rounded border border-border bg-default py-1 px-2"
+              className="rounded border border-border bg-default px-2 py-1"
               value={title}
               onChange={(event) => {
                 setTitle(event.target.value)
@@ -139,7 +139,7 @@ const EditSmartViewModal = ({ controller, platform }: Props) => {
             <div className="text-sm font-semibold">Predicate:</div>
             <div className="flex flex-grow flex-col overflow-hidden rounded-md border border-border">
               <textarea
-                className="h-full min-h-[10rem] w-full flex-grow resize-none bg-default py-1.5 px-2.5 font-mono text-sm"
+                className="h-full min-h-[10rem] w-full flex-grow resize-none bg-default px-2.5 py-1.5 font-mono text-sm"
                 value={predicateJson}
                 onChange={(event) => {
                   setPredicateJson(event.target.value)

packages/web/src/javascripts/Components/Preferences/Panes/HomeServer/HomeServer.tsx

@@ -44,7 +44,7 @@ const HomeServer = () => {
       <PreferencesGroup>
         <Title>Remote access</Title>
         <Subtitle>Accessing your home server while on the go is easy and secure with Tailscale.</Subtitle>
-        <ol className="mt-3 ml-3 list-outside list-decimal">
+        <ol className="ml-3 mt-3 list-outside list-decimal">
           <li>
             Register on{' '}
             <a className="text-info" href="https://tailscale.com/">
@@ -73,7 +73,7 @@ const HomeServer = () => {
           For automatic backups, you can place your server's data inside of a synced cloud folder, like Dropbox,
           Tresorit, or iCloud Drive.
         </Subtitle>
-        <ol className="mt-3 ml-3 list-outside list-decimal">
+        <ol className="ml-3 mt-3 list-outside list-decimal">
           <li>Change your server's data location by selecting "Change Location" in the Home Server section above.</li>
           <li className="mt-2">Select a cloud drive to store your server's data in.</li>
           <li className="mt-2">Restart your home server.</li>

packages/web/src/javascripts/Components/Preferences/Panes/HomeServer/HomeServerSettings.tsx

@@ -369,7 +369,7 @@ const HomeServerSettings = () => {
                   <div className={'mt-2 grid grid-cols-1 rounded-md border border-border p-4'}>
                     <div className="flex items-center">
                       <Icon
-                        className={classNames('mr-1 -ml-1 h-5 w-5', PremiumFeatureIconClass)}
+                        className={classNames('-ml-1 mr-1 h-5 w-5', PremiumFeatureIconClass)}
                         type={PremiumFeatureIconName}
                       />
                       <h1 className="sk-h3 m-0 text-sm font-semibold">Activate Premium Features</h1>

packages/web/src/javascripts/Components/Preferences/Panes/Security/EncryptionStatusItem.tsx

@@ -8,7 +8,7 @@ type Props = {
 }
 
 const EncryptionStatusItem: FunctionComponent<Props> = ({ icon, status, checkmark = true }) => (
-  <div className="text-input min-h-8 no-border my-1 flex w-full flex-row items-center rounded bg-contrast py-1.5 px-3 focus-within:ring-info">
+  <div className="text-input min-h-8 no-border my-1 flex w-full flex-row items-center rounded bg-contrast px-3 py-1.5 focus-within:ring-info">
     {icon}
     <div className="min-h-1 min-w-3" />
     <div className="flex-grow text-sm text-text">{status}</div>

packages/web/src/javascripts/Components/Preferences/Panes/Security/ErroredItems.tsx

@@ -80,14 +80,14 @@ const ErroredItems: FunctionComponent = () => {
         <Text>{`${erroredItems.length} items are errored and could not be decrypted.`}</Text>
         <div className="flex">
           <Button
-            className="mt-3 mr-2 min-w-20"
+            className="mr-2 mt-3 min-w-20"
             label="Export all"
             onClick={() => {
               void application.getArchiveService().downloadEncryptedItems(erroredItems)
             }}
           />
           <Button
-            className="mt-3 mr-2 min-w-20"
+            className="mr-2 mt-3 min-w-20"
             colorStyle="danger"
             label="Delete all"
             onClick={() => {
@@ -107,21 +107,21 @@ const ErroredItems: FunctionComponent = () => {
                   <Text>Last Modified: {item.updatedAtString}</Text>
                   <div className="flex">
                     <Button
-                      className="mt-3 mr-2 min-w-20"
+                      className="mr-2 mt-3 min-w-20"
                       label="Attempt decryption"
                       onClick={() => {
                         attemptDecryption(item)
                       }}
                     />
                     <Button
-                      className="mt-3 mr-2 min-w-20"
+                      className="mr-2 mt-3 min-w-20"
                       label="Export"
                       onClick={() => {
                         void application.getArchiveService().downloadEncryptedItem(item)
                       }}
                     />
                     <Button
-                      className="mt-3 mr-2 min-w-20"
+                      className="mr-2 mt-3 min-w-20"
                       colorStyle="danger"
                       label="Delete"
                       onClick={() => {

packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/AuthAppInfoPopup.tsx

@@ -11,7 +11,7 @@ const AuthAppInfoTooltip = () => {
       <HovercardAnchor store={infoHovercard}>
         <Icon type="info" />
       </HovercardAnchor>
-      <Hovercard store={infoHovercard} className=" max-w-76 rounded border border-border bg-default py-2 px-3 text-sm">
+      <Hovercard store={infoHovercard} className=" max-w-76 rounded border border-border bg-default px-3 py-2 text-sm">
         Some apps, like Google Authenticator, do not back up and restore your secret keys if you lose your device or get
         a new one.
       </Hovercard>

packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Contacts/ContactItem.tsx

@@ -28,7 +28,7 @@ const ContactItem = ({ contact }: Props) => {
         <EditContactModal editContactUuid={contact.contactUuid} onCloseDialog={closeContactModal} />
       </ModalOverlay>
 
-      <div className="bg-gray-100 flex flex-row gap-3.5 rounded-lg py-2.5 px-3.5 shadow-md">
+      <div className="bg-gray-100 flex flex-row gap-3.5 rounded-lg px-3.5 py-2.5 shadow-md">
         <Icon type={'user'} size="custom" className="mt-2.5 h-5.5 w-5.5 flex-shrink-0" />
         <div className="flex flex-col gap-2 py-1.5">
           <span

packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Contacts/EditContactModal.tsx

@@ -88,7 +88,7 @@ const EditContactModal: FunctionComponent<Props> = ({ onCloseDialog, fromInvite,
       close={handleDialogClose}
       actions={modalActions}
     >
-      <div className="px-4.5 pt-4 pb-1.5">
+      <div className="px-4.5 pb-1.5 pt-4">
         <div className="flex w-full flex-col">
           <div className="mb-3">
             <DecoratedInput

packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Invites/InviteItem.tsx

@@ -37,7 +37,7 @@ const InviteItem = ({ inviteRecord }: Props) => {
         <EditContactModal fromInvite={inviteRecord} onCloseDialog={closeAddContactModal} />
       </ModalOverlay>
 
-      <div className="bg-gray-100 flex flex-row gap-3.5 rounded-lg py-2.5 px-3.5 shadow-md">
+      <div className="bg-gray-100 flex flex-row gap-3.5 rounded-lg px-3.5 py-2.5 shadow-md">
         <Icon type={'archive'} size="custom" className="mt-2.5 h-5.5 w-5.5 flex-shrink-0" />
         <div className="flex flex-col gap-2 py-1.5">
           <span className="mr-auto overflow-hidden text-ellipsis text-sm">Vault Name: {inviteData.metadata.name}</span>

packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Vaults/VaultItem.tsx

@@ -107,7 +107,7 @@ const VaultItem = ({ vault }: Props) => {
         <EditVaultModal existingVaultUuid={vault.uuid} onCloseDialog={closeVaultModal} />
       </ModalOverlay>
 
-      <div className="bg-gray-100 flex flex-row gap-3.5 rounded-lg py-2.5 px-3.5 shadow-md">
+      <div className="bg-gray-100 flex flex-row gap-3.5 rounded-lg px-3.5 py-2.5 shadow-md">
         <Icon type={'safe-square'} size="custom" className="mt-2.5 h-5.5 w-5.5 flex-shrink-0" />
         <div className="flex flex-col gap-2 py-1.5">
           <span className="mr-auto overflow-hidden text-ellipsis text-base font-bold">{vault.name}</span>

packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Vaults/VaultModal/EditVaultModal.tsx

@@ -175,7 +175,7 @@ const EditVaultModal: FunctionComponent<Props> = ({ onCloseDialog, existingVault
 
   return (
     <Modal title={existingVault ? 'Edit Vault' : 'Create New Vault'} close={handleDialogClose} actions={modalActions}>
-      <div className="px-4.5 pt-4 pb-1.5">
+      <div className="px-4.5 pb-1.5 pt-4">
         <div className="flex w-full flex-col">
           <div className="mb-3">
             <div className="text-lg">Vault Info</div>

packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Vaults/VaultModal/VaultModalInvites.tsx

@@ -29,7 +29,7 @@ export const VaultModalInvites = ({
       {invites.map((invite) => {
         const contact = application.contacts.findTrustedContactForInvite(invite)
         return (
-          <div key={invite.uuid} className="bg-gray-100 flex flex-row gap-3.5 rounded-lg py-2.5 px-3.5 shadow-md">
+          <div key={invite.uuid} className="bg-gray-100 flex flex-row gap-3.5 rounded-lg px-3.5 py-2.5 shadow-md">
             <Icon type={'user'} size="custom" className="mt-2.5 h-5.5 w-5.5 flex-shrink-0" />
             <div className="flex flex-col gap-2 py-1.5">
               <span className="mr-auto overflow-hidden text-ellipsis text-base font-bold">

packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Vaults/VaultModal/VaultModalMembers.tsx

@@ -39,7 +39,7 @@ export const VaultModalMembers = ({
         return (
           <div
             key={contact?.uuid || member.user_uuid}
-            className="bg-gray-100 flex flex-row gap-3.5 rounded-lg py-2.5 px-3.5 shadow-md"
+            className="bg-gray-100 flex flex-row gap-3.5 rounded-lg px-3.5 py-2.5 shadow-md"
           >
             <Icon type={'user'} size="custom" className="mt-2.5 h-5.5 w-5.5 flex-shrink-0" />
             <div className="flex flex-col gap-2 py-1.5">

packages/web/src/javascripts/Components/Preferences/PreferencesComponents/MenuItem.tsx

@@ -13,7 +13,7 @@ interface Props {
 
 const PreferencesMenuItem: FunctionComponent<Props> = ({ iconType, label, selected, onClick, hasBubble }) => (
   <div
-    className={`preferences-menu-item box-border flex h-auto w-auto min-w-42 cursor-pointer select-none flex-row items-center justify-start rounded border border-solid py-2 px-4 text-sm hover:border-border hover:bg-default ${
+    className={`preferences-menu-item box-border flex h-auto w-auto min-w-42 cursor-pointer select-none flex-row items-center justify-start rounded border border-solid px-4 py-2 text-sm hover:border-border hover:bg-default ${
       selected ? 'selected border-info font-bold text-info' : 'border-transparent'
     }`}
     onClick={(e) => {

packages/web/src/javascripts/Components/PurchaseFlow/Panes/CreateAccount.tsx

@@ -100,16 +100,16 @@ const CreateAccount: FunctionComponent<Props> = ({ viewControllerManager, applic
 
   return (
     <div className="flex items-center">
-      <CircleIcon className="absolute top-[40%] -left-28 h-8 w-8" />
+      <CircleIcon className="absolute -left-28 top-[40%] h-8 w-8" />
-      <BlueDotIcon className="absolute top-[35%] -left-10 h-4 w-4" />
+      <BlueDotIcon className="absolute -left-10 top-[35%] h-4 w-4" />
       <DiamondIcon className="absolute -bottom-5 left-0 -z-[1] h-26 w-26 -translate-x-1/2" />
 
-      <CircleIcon className="absolute bottom-[35%] -right-20 h-8 w-8" />
+      <CircleIcon className="absolute -right-20 bottom-[35%] h-8 w-8" />
-      <BlueDotIcon className="absolute bottom-[25%] -right-10 h-4 w-4" />
+      <BlueDotIcon className="absolute -right-10 bottom-[25%] h-4 w-4" />
-      <DiamondIcon className="absolute top-0 -right-2 -z-[1] h-18 w-18 translate-x-1/2" />
+      <DiamondIcon className="absolute -right-2 top-0 -z-[1] h-18 w-18 translate-x-1/2" />
 
       <div className="mr-0 lg:mr-12">
-        <h1 className="mt-0 mb-2 text-2xl font-bold">Create your free account</h1>
+        <h1 className="mb-2 mt-0 text-2xl font-bold">Create your free account</h1>
         <div className="mb-4 text-sm font-medium">to continue to Standard Notes.</div>
         <form onSubmit={handleCreateAccount}>
           <div className="flex flex-col">

packages/web/src/javascripts/Components/PurchaseFlow/Panes/SignIn.tsx

@@ -93,16 +93,16 @@ const SignIn: FunctionComponent<Props> = ({ viewControllerManager, application }
 
   return (
     <div className="flex items-center">
-      <CircleIcon className="absolute top-[35%] -left-56 h-8 w-8" />
+      <CircleIcon className="absolute -left-56 top-[35%] h-8 w-8" />
-      <BlueDotIcon className="absolute top-[30%] -left-40 h-4 w-4" />
+      <BlueDotIcon className="absolute -left-40 top-[30%] h-4 w-4" />
       <DiamondIcon className="absolute -bottom-5 left-0 -z-[1] h-26 w-26 -translate-x-1/2" />
 
-      <CircleIcon className="absolute bottom-[30%] -right-56 h-8 w-8" />
+      <CircleIcon className="absolute -right-56 bottom-[30%] h-8 w-8" />
-      <BlueDotIcon className="absolute bottom-[20%] -right-44 h-4 w-4" />
+      <BlueDotIcon className="absolute -right-44 bottom-[20%] h-4 w-4" />
-      <DiamondIcon className="absolute top-0 -right-2 -z-[1] h-18 w-18 translate-x-1/2" />
+      <DiamondIcon className="absolute -right-2 top-0 -z-[1] h-18 w-18 translate-x-1/2" />
 
       <div>
-        <h1 className="mt-0 mb-2 text-2xl font-bold">Sign in</h1>
+        <h1 className="mb-2 mt-0 text-2xl font-bold">Sign in</h1>
         <div className="mb-4 text-sm font-medium">to continue to Standard Notes.</div>
         <form onSubmit={handleSignIn}>
           <div className="flex flex-col">

packages/web/src/javascripts/Components/PurchaseFlow/PurchaseFlowView.tsx

@@ -34,11 +34,11 @@ const PurchaseFlowView: FunctionComponent<PurchaseFlowViewProps> = ({ viewContro
   const { currentPane } = viewControllerManager.purchaseFlowController
 
   return (
-    <div className="absolute top-0 left-0 z-purchase-flow flex h-full w-full items-center justify-center overflow-hidden bg-passive-super-light">
+    <div className="absolute left-0 top-0 z-purchase-flow flex h-full w-full items-center justify-center overflow-hidden bg-passive-super-light">
       <div className="relative w-fit">
         <div className="rounded-0 relative mb-4 w-full border border-solid border-border bg-default px-8 py-8 md:rounded md:p-12">
           <button
-            className="absolute top-4 right-4 rounded-full p-1 hover:bg-info-backdrop"
+            className="absolute right-4 top-4 rounded-full p-1 hover:bg-info-backdrop"
             onClick={() => {
               viewControllerManager.purchaseFlowController.closePurchaseFlow()
             }}

packages/web/src/javascripts/Components/Radio/RadioIndicator.tsx

@@ -8,7 +8,7 @@ const RadioIndicator = ({ checked, className, disabled }: Props) => (
   <div
     className={`relative h-5 w-5 rounded-full border-2 border-solid md:h-4 md:w-4 ${disabled ? 'opacity-50' : ''} ${
       checked
-        ? 'border-info after:absolute after:top-1/2 after:left-1/2 after:h-3 after:w-3 after:-translate-x-1/2 after:-translate-y-1/2 after:rounded-full after:bg-info md:after:h-2 md:after:w-2'
+        ? 'border-info after:absolute after:left-1/2 after:top-1/2 after:h-3 after:w-3 after:-translate-x-1/2 after:-translate-y-1/2 after:rounded-full after:bg-info md:after:h-2 md:after:w-2'
         : 'border-passive-1'
     } ${className}`}
   ></div>

packages/web/src/javascripts/Components/RadioButtonGroup/RadioButtonGroup.tsx

@@ -22,8 +22,8 @@ const RadioButtonGroup = ({ value, items, onChange, className }: Props) => {
       {items.map(({ label, value: itemValue }) => (
         <label
           className={classNames(
-            'flex-grow select-none py-1.5 px-3.5 text-center',
+            'flex-grow select-none px-3.5 py-1.5 text-center',
-            'first:rounded-tl first:rounded-bl last:rounded-tr last:rounded-br',
+            'first:rounded-bl first:rounded-tl last:rounded-br last:rounded-tr',
             itemValue === value &&
               'bg-info-backdrop font-medium text-info ring-1 ring-inset ring-info focus-within:ring-2',
           )}

packages/web/src/javascripts/Components/RecoveryCodeBanner/RecoveryCodeBanner.tsx

@@ -28,7 +28,7 @@ const RecoveryCodeBanner = ({ application }: { application: WebApplication }) =>
   return (
     <div className="grid grid-cols-1 rounded-md border border-border p-4">
       <div className="flex items-center">
-        <Icon className="mr-1 -ml-1 h-5 w-5 text-info group-disabled:text-passive-2" type="asterisk" />
+        <Icon className="-ml-1 mr-1 h-5 w-5 text-info group-disabled:text-passive-2" type="asterisk" />
         <h1 className="sk-h3 m-0 text-sm font-semibold">Save your recovery code</h1>
       </div>
       <p className="col-start-1 col-end-3 m-0 mt-1 text-sm">
@@ -42,10 +42,10 @@ const RecoveryCodeBanner = ({ application }: { application: WebApplication }) =>
         </Button>
       )}
       {recoveryCode && (
-        <div className="group relative mt-2 rounded border border-border py-2 px-3 text-sm font-semibold">
+        <div className="group relative mt-2 rounded border border-border px-3 py-2 text-sm font-semibold">
           <StyledTooltip label="Copy to clipboard" className="!z-modal">
             <button
-              className="absolute top-2 right-2 flex rounded border border-border bg-default p-1 opacity-0 hover:bg-contrast focus:opacity-100 group-hover:opacity-100"
+              className="absolute right-2 top-2 flex rounded border border-border bg-default p-1 opacity-0 hover:bg-contrast focus:opacity-100 group-hover:opacity-100"
               onClick={() => {
                 void navigator.clipboard.writeText(recoveryCode)
               }}

packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalContentPane.tsx

@@ -16,12 +16,12 @@ const HistoryModalContentPane = ({ noteHistoryController, note }: Props) => {
   switch (contentState) {
     case RevisionContentState.Idle:
       return (
-        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none text-sm text-passive-0">
+        <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 select-none text-sm text-passive-0">
           No revision selected
         </div>
       )
     case RevisionContentState.Loading:
-      return <Spinner className="absolute top-1/2 left-1/2 h-5 w-5 -translate-x-1/2 -translate-y-1/2" />
+      return <Spinner className="absolute left-1/2 top-1/2 h-5 w-5 -translate-x-1/2 -translate-y-1/2" />
     case RevisionContentState.Loaded:
       if (!selectedRevision) {
         return null

packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalDialog.tsx

@@ -18,7 +18,7 @@ const HistoryModalDialog = forwardRef(({ children, onDismiss }: Props, ref: Forw
       store={dialog}
       aria-label="Note revision history"
       ref={ref}
-      className="fixed top-0 left-0 z-modal h-full w-full"
+      className="fixed left-0 top-0 z-modal h-full w-full"
     >
       <div
         className="absolute z-0 h-full w-full bg-passive-5 opacity-0 md:opacity-75"
@@ -28,7 +28,7 @@ const HistoryModalDialog = forwardRef(({ children, onDismiss }: Props, ref: Forw
       <div
         className={classNames(
           'absolute z-[1] my-0 flex h-full w-full flex-col rounded-md bg-[color:var(--modal-background-color)]',
-          'p-0 pt-safe-top pb-safe-bottom shadow-lg md:max-h-[90%] md:w-[90%] md:max-w-[90%]',
+          'p-0 pb-safe-bottom pt-safe-top shadow-lg md:max-h-[90%] md:w-[90%] md:max-w-[90%]',
           'md:left-1/2 md:top-1/2 md:-translate-x-1/2 md:-translate-y-1/2 md:transform',
           getPlatformString(),
         )}

packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalDialogContent.tsx

@@ -27,7 +27,7 @@ const HistoryModalDialogContent = ({
 
   return (
     <>
-      <MobileModalHeader className="items-center border-b border-border py-1 px-2 md:hidden">
+      <MobileModalHeader className="items-center border-b border-border px-2 py-1 md:hidden">
         <MobileModalAction type="secondary" action={toggleTabMenu} slot="left" ref={tabOptionRef}>
           <div className="rounded-full border border-border p-0.5">
             <Icon type="more" />

packages/web/src/javascripts/Components/RevisionHistoryModal/RemoteHistoryList.tsx

@@ -40,7 +40,7 @@ const RemoteHistoryList: FunctionComponent<RemoteHistoryListProps> = ({
         if (group.entries && group.entries.length) {
           return (
             <Fragment key={group.title}>
-              <div className="mt-2.5 mb-1 select-none px-3 text-sm font-semibold uppercase text-passive-0">
+              <div className="mb-1 mt-2.5 select-none px-3 text-sm font-semibold uppercase text-passive-0">
                 {group.title}
               </div>
               {group.entries.map((entry) => (

packages/web/src/javascripts/Components/RevisionHistoryModal/RevisionContentLocked.tsx

@@ -33,7 +33,7 @@ const RevisionContentLocked: FunctionComponent = () => {
     <div className="flex h-full w-full items-center justify-center">
       <div className="max-w-40% flex flex-col items-center px-8 text-center">
         <HistoryLockedIllustration />
-        <div className="mt-2 mb-1 text-lg font-bold">Can't access this version</div>
+        <div className="mb-1 mt-2 text-lg font-bold">Can't access this version</div>
         <div className="leading-140% mb-4 text-passive-0">
           {getPremiumContentCopy(planName)}. Learn more about our other plans to upgrade your history capacity.
         </div>

packages/web/src/javascripts/Components/RevisionHistoryModal/SessionHistoryList.tsx

@@ -32,7 +32,7 @@ const SessionHistoryList: FunctionComponent<Props> = ({ noteHistoryController, o
         if (group.entries && group.entries.length) {
           return (
             <Fragment key={group.title}>
-              <div className="mt-2.5 mb-1 select-none px-3 text-sm font-semibold uppercase text-passive-0">
+              <div className="mb-1 mt-2.5 select-none px-3 text-sm font-semibold uppercase text-passive-0">
                 {group.title}
               </div>
               {group.entries.map((entry, index) => (

packages/web/src/javascripts/Components/SearchBar/SearchBar.tsx

@@ -47,7 +47,7 @@ const SearchBar = ({ itemListController, searchOptionsController, hideOptions =
   }, [clearFilterText])
 
   return (
-    <div className="pt-3 pb-0.5" role="search">
+    <div className="pb-0.5 pt-3" role="search">
       <DecoratedInput
         autocomplete={false}
         id={ElementIds.SearchBar}

packages/web/src/javascripts/Components/Shared/CopyableCodeBlock.tsx

@@ -19,7 +19,7 @@ const CopyableCodeBlock = ({ code }: Props) => {
       onMouseLeave={() => setIsCopyButtonVisible(false)}
     >
       <pre className="overflow-auto rounded-md bg-default px-2.5 py-1.5">{code}</pre>
-      <div className="absolute top-1.5 right-1.5">
+      <div className="absolute right-1.5 top-1.5">
         <button
           ref={buttonRef}
           className={classNames(
@@ -50,7 +50,7 @@ const CopyableCodeBlock = ({ code }: Props) => {
         <div
           className={classNames(
             didCopy && isCopyButtonVisible ? '' : 'hidden',
-            'absolute top-full right-0 min-w-max translate-x-2 translate-y-1 select-none rounded border border-border bg-default py-1.5 px-3 text-left md:peer-hover:block',
+            'absolute right-0 top-full min-w-max translate-x-2 translate-y-1 select-none rounded border border-border bg-default px-3 py-1.5 text-left md:peer-hover:block',
           )}
         >
           {didCopy ? 'Copied!' : 'Copy example to clipboard'}

packages/web/src/javascripts/Components/SmartViewBuilder/AddSmartViewModal.tsx

@@ -147,7 +147,7 @@ const AddSmartViewModal = ({ controller, platform }: Props) => {
           <div className="flex items-center gap-2.5">
             <div className="text-sm font-semibold">Title:</div>
             <input
-              className="rounded border border-border bg-default py-1 px-2"
+              className="rounded border border-border bg-default px-2 py-1"
               value={title}
               onChange={(event) => {
                 setTitle(event.target.value)
@@ -207,7 +207,7 @@ const AddSmartViewModal = ({ controller, platform }: Props) => {
               </TabPanel>
               <TabPanel state={tabState} id="custom" className="flex flex-grow flex-col">
                 <textarea
-                  className="h-full min-h-[10rem] w-full flex-grow resize-none bg-default py-1.5 px-2.5 font-mono text-sm"
+                  className="h-full min-h-[10rem] w-full flex-grow resize-none bg-default px-2.5 py-1.5 font-mono text-sm"
                   value={customPredicateJson}
                   onChange={(event) => {
                     setCustomPredicateJson(event.target.value)
@@ -224,7 +224,7 @@ const AddSmartViewModal = ({ controller, platform }: Props) => {
               </TabPanel>
             </TabsContainer>
             {tabState.activeTab === 'custom' && (
-              <div className="flex flex-col gap-1.5 rounded-md border-2 border-info-backdrop bg-info-backdrop py-3 px-4">
+              <div className="flex flex-col gap-1.5 rounded-md border-2 border-info-backdrop bg-info-backdrop px-4 py-3">
                 <Disclosure
                   store={jsonExamplesDisclosure}
                   className="flex items-center justify-between focus:shadow-none focus:outline-none"

packages/web/src/javascripts/Components/SmartViewBuilder/CompoundPredicateBuilder.tsx

@@ -47,7 +47,7 @@ const CompoundPredicateBuilder = ({ controller }: Props) => {
           <div className="flex w-full flex-col gap-2 md:flex-row md:items-center">
             {index !== 0 && <div className="mr-2 text-sm font-semibold">{operator === 'and' ? 'AND' : 'OR'}</div>}
             <select
-              className="flex-grow rounded border border-border bg-default py-1.5 px-2 focus:outline focus:outline-1 focus:outline-info"
+              className="flex-grow rounded border border-border bg-default px-2 py-1.5 focus:outline focus:outline-1 focus:outline-info"
               value={predicate.keypath}
               onChange={(event) => {
                 changePredicateKeypath(index, event.target.value as PredicateKeypath)
@@ -60,7 +60,7 @@ const CompoundPredicateBuilder = ({ controller }: Props) => {
               ))}
             </select>
             <select
-              className="rounded border border-border bg-default py-1.5 px-2 focus:outline focus:outline-1 focus:outline-info"
+              className="rounded border border-border bg-default px-2 py-1.5 focus:outline focus:outline-1 focus:outline-info"
               value={predicate.operator}
               onChange={(event) => {
                 setPredicate(index, { operator: event.target.value as PredicateOperator })
@@ -106,7 +106,7 @@ const CompoundPredicateBuilder = ({ controller }: Props) => {
         </div>
       ))}
       {predicates.some((predicate) => PredicateKeypathTypes[predicate.keypath as PredicateKeypath] === 'date') && (
-        <div className="flex flex-col gap-2 rounded-md border-2 border-info-backdrop bg-info-backdrop py-3 px-4 [&_code]:rounded [&_code]:bg-default [&_code]:px-1.5 [&_code]:py-1">
+        <div className="flex flex-col gap-2 rounded-md border-2 border-info-backdrop bg-info-backdrop px-4 py-3 [&_code]:rounded [&_code]:bg-default [&_code]:px-1.5 [&_code]:py-1">
           <div className="text-sm font-semibold">Date Examples:</div>
           <ul className="space-y-2 pl-4">
             <li>

packages/web/src/javascripts/Components/SmartViewBuilder/PredicateValue.tsx

@@ -16,7 +16,7 @@ const PredicateValue = ({ keypath, value, setValue }: Props) => {
 
   return type === 'noteType' ? (
     <select
-      className="flex-grow rounded border border-border bg-default py-1.5 px-2 focus:outline focus:outline-1 focus:outline-info"
+      className="flex-grow rounded border border-border bg-default px-2 py-1.5 focus:outline focus:outline-1 focus:outline-info"
       value={value}
       onChange={(event) => {
         setValue(event.target.value)
@@ -30,7 +30,7 @@ const PredicateValue = ({ keypath, value, setValue }: Props) => {
     </select>
   ) : type === 'editorIdentifier' ? (
     <select
-      className="flex-grow rounded border border-border bg-default py-1.5 px-2 focus:outline focus:outline-1 focus:outline-info"
+      className="flex-grow rounded border border-border bg-default px-2 py-1.5 focus:outline focus:outline-1 focus:outline-info"
       value={value}
       onChange={(event) => {
         setValue(event.target.value)
@@ -44,7 +44,7 @@ const PredicateValue = ({ keypath, value, setValue }: Props) => {
     </select>
   ) : type === 'string' || type === 'date' ? (
     <input
-      className="flex-grow rounded border border-border bg-default py-1.5 px-2"
+      className="flex-grow rounded border border-border bg-default px-2 py-1.5"
       value={value}
       onChange={(event) => {
         setValue(event.target.value)
@@ -52,7 +52,7 @@ const PredicateValue = ({ keypath, value, setValue }: Props) => {
     />
   ) : type === 'boolean' ? (
     <select
-      className="flex-grow rounded border border-border bg-default py-1.5 px-2 focus:outline focus:outline-1 focus:outline-info"
+      className="flex-grow rounded border border-border bg-default px-2 py-1.5 focus:outline focus:outline-1 focus:outline-info"
       value={value}
       onChange={(event) => {
         setValue(event.target.value)
@@ -64,7 +64,7 @@ const PredicateValue = ({ keypath, value, setValue }: Props) => {
   ) : type === 'number' ? (
     <input
       type="number"
-      className="flex-grow rounded border border-border bg-default py-1.5 px-2"
+      className="flex-grow rounded border border-border bg-default px-2 py-1.5"
       value={value}
       onChange={(event) => {
         setValue(event.target.value)

packages/web/src/javascripts/Components/StyledTooltip/StyledTooltip.tsx

@@ -47,7 +47,7 @@ const StyledTooltip = ({
         autoFocusOnShow={!showOnHover}
         store={tooltip}
         className={classNames(
-          'z-tooltip max-w-max rounded border border-border bg-contrast py-1.5 px-3 text-sm text-foreground shadow',
+          'z-tooltip max-w-max rounded border border-border bg-contrast px-3 py-1.5 text-sm text-foreground shadow',
           className,
         )}
         updatePosition={() => {

packages/web/src/javascripts/Components/SuperEditor/BlocksEditor.tsx

@@ -83,7 +83,7 @@ export const BlocksEditor: FunctionComponent<BlocksEditorProps> = ({
                 spellCheck={spellcheck}
                 onScroll={onScroll}
               />
-              <div className="search-highlight-container pointer-events-none absolute top-0 left-0 h-full w-full" />
+              <div className="search-highlight-container pointer-events-none absolute left-0 top-0 h-full w-full" />
             </div>
           </div>
         }

packages/web/src/javascripts/Components/SuperEditor/Plugins/CodeOptionsPlugin/CodeOptions.tsx

@@ -88,7 +88,7 @@ const CodeOptionsPlugin = () => {
 
   return (
     <>
-      <div className="absolute top-2 right-6 rounded border border-border bg-default p-2">
+      <div className="absolute right-6 top-2 rounded border border-border bg-default p-2">
         <Dropdown
           label="Change code block language"
           items={CODE_LANGUAGE_OPTIONS.map(([value, label]) => ({

packages/web/src/javascripts/Components/SuperEditor/Plugins/FloatingLinkEditorPlugin/index.tsx

@@ -154,7 +154,7 @@ function FloatingLinkEditor({
   return (
     <div
       ref={editorRef}
-      className="absolute top-0 left-0 max-w-[100vw] rounded-lg border border-border bg-default py-1 px-2 shadow shadow-contrast md:hidden"
+      className="absolute left-0 top-0 max-w-[100vw] rounded-lg border border-border bg-default px-2 py-1 shadow shadow-contrast md:hidden"
     >
       <LinkEditor
         linkUrl={linkUrl}

packages/web/src/javascripts/Components/SuperEditor/Plugins/FloatingTextFormatToolbarPlugin/index.tsx

@@ -277,7 +277,7 @@ function TextFormatFloatingToolbar({
   return (
     <div
       ref={toolbarRef}
-      className="absolute top-0 left-0 rounded-lg border border-border bg-default py-1 px-2 shadow shadow-contrast"
+      className="absolute left-0 top-0 rounded-lg border border-border bg-default px-2 py-1 shadow shadow-contrast"
     >
       {isLink && (
         <LinkEditor
@@ -289,7 +289,7 @@ function TextFormatFloatingToolbar({
           lastSelection={lastSelection}
         />
       )}
-      {isText && isLink && <div role="presentation" className="mt-0.5 mb-1.5 h-px bg-border" />}
+      {isText && isLink && <div role="presentation" className="mb-1.5 mt-0.5 h-px bg-border" />}
       {isText && (
         <div className="flex gap-1">
           <ToolbarButton

packages/web/src/javascripts/Components/SuperEditor/Plugins/MobileToolbarPlugin/MobileToolbarPlugin.tsx

@@ -217,7 +217,7 @@ const MobileToolbarPlugin = () => {
           {items.map((item) => {
             return (
               <button
-                className="flex items-center justify-center rounded py-3 px-3"
+                className="flex items-center justify-center rounded px-3 py-3"
                 aria-label={item.name}
                 onClick={item.onSelect}
                 key={item.name}
@@ -228,7 +228,7 @@ const MobileToolbarPlugin = () => {
           })}
         </div>
         <button
-          className="flex flex-shrink-0 items-center justify-center rounded border-l border-border py-3 px-3"
+          className="flex flex-shrink-0 items-center justify-center rounded border-l border-border px-3 py-3"
           aria-label="Dismiss keyboard"
         >
           <Icon type="keyboard-close" size="medium" />

packages/web/src/javascripts/Components/SuperEditor/Plugins/SearchPlugin/SearchDialog.tsx

@@ -70,7 +70,7 @@ export const SearchDialog = ({ open, closeDialog }: { open: boolean; closeDialog
         )}
       </button>
       <div
-        className="flex flex-col gap-2 py-2 px-2"
+        className="flex flex-col gap-2 px-2 py-2"
         onKeyDown={(event) => {
           if (event.key === KeyboardKey.Escape) {
             closeDialog()
@@ -118,14 +118,14 @@ export const SearchDialog = ({ open, closeDialog }: { open: boolean; closeDialog
           />
           <label
             className={classNames(
-              'relative flex items-center rounded border py-1 px-1.5 focus-within:ring-2 focus-within:ring-info focus-within:ring-offset-2 focus-within:ring-offset-default',
+              'relative flex items-center rounded border px-1.5 py-1 focus-within:ring-2 focus-within:ring-info focus-within:ring-offset-2 focus-within:ring-offset-default',
               isCaseSensitive ? 'border-info bg-info text-info-contrast' : 'border-border hover:bg-contrast',
             )}
             title={`Case sensitive (${caseSensitivityShortcut})`}
           >
             <input
               type="checkbox"
-              className="absolute top-0 left-0 z-[1] m-0 h-full w-full cursor-pointer border border-transparent p-0 opacity-0 shadow-none outline-none"
+              className="absolute left-0 top-0 z-[1] m-0 h-full w-full cursor-pointer border border-transparent p-0 opacity-0 shadow-none outline-none"
               checked={isCaseSensitive}
               onChange={() => {
                 dispatch({