diff --git a/packages/web/src/javascripts/Components/AccountMenu/ConfirmPassword.tsx b/packages/web/src/javascripts/Components/AccountMenu/ConfirmPassword.tsx
index ce29b651c..b0f73ec6b 100644
--- a/packages/web/src/javascripts/Components/AccountMenu/ConfirmPassword.tsx
+++ b/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}
diff --git a/packages/web/src/javascripts/Components/AccountMenu/CreateAccount.tsx b/packages/web/src/javascripts/Components/AccountMenu/CreateAccount.tsx
index 9db1eb895..2e1a0f964 100644
--- a/packages/web/src/javascripts/Components/AccountMenu/CreateAccount.tsx
+++ b/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"
diff --git a/packages/web/src/javascripts/Components/AccountMenu/GeneralAccountMenu.tsx b/packages/web/src/javascripts/Components/AccountMenu/GeneralAccountMenu.tsx
index 2811ea111..c9ba29e10 100644
--- a/packages/web/src/javascripts/Components/AccountMenu/GeneralAccountMenu.tsx
+++ b/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" />
diff --git a/packages/web/src/javascripts/Components/AccountMenu/SignIn.tsx b/packages/web/src/javascripts/Components/AccountMenu/SignIn.tsx
index 714e088b5..4f58ec66b 100644
--- a/packages/web/src/javascripts/Components/AccountMenu/SignIn.tsx
+++ b/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}
diff --git a/packages/web/src/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceMenuItem.tsx b/packages/web/src/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceMenuItem.tsx
index 684450d03..13564e3c0 100644
--- a/packages/web/src/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceMenuItem.tsx
+++ b/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>
diff --git a/packages/web/src/javascripts/Components/AlertDialog/AlertDialog.tsx b/packages/web/src/javascripts/Components/AlertDialog/AlertDialog.tsx
index 94f3219fe..1a2b7fb19 100644
--- a/packages/web/src/javascripts/Components/AlertDialog/AlertDialog.tsx
+++ b/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,
         )}
diff --git a/packages/web/src/javascripts/Components/ChallengeModal/ChallengeModal.tsx b/packages/web/src/javascripts/Components/ChallengeModal/ChallengeModal.tsx
index a94674780..edb6f3c01 100644
--- a/packages/web/src/javascripts/Components/ChallengeModal/ChallengeModal.tsx
+++ b/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>
           )}
diff --git a/packages/web/src/javascripts/Components/ChallengeModal/ChallengePrompt.tsx b/packages/web/src/javascripts/Components/ChallengeModal/ChallengePrompt.tsx
index 61a27a851..729edb23e 100644
--- a/packages/web/src/javascripts/Components/ChallengeModal/ChallengePrompt.tsx
+++ b/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,
diff --git a/packages/web/src/javascripts/Components/ChangeEditor/ChangeEditorMenu.tsx b/packages/web/src/javascripts/Components/ChangeEditor/ChangeEditorMenu.tsx
index a86b58fa0..dee0426df 100644
--- a/packages/web/src/javascripts/Components/ChangeEditor/ChangeEditorMenu.tsx
+++ b/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>
                             )}
diff --git a/packages/web/src/javascripts/Components/ChangeEditor/ChangeEditorMultipleMenu.tsx b/packages/web/src/javascripts/Components/ChangeEditor/ChangeEditorMultipleMenu.tsx
index e4eb6f44f..ecc0b6ba0 100644
--- a/packages/web/src/javascripts/Components/ChangeEditor/ChangeEditorMultipleMenu.tsx
+++ b/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>
                         )}
diff --git a/packages/web/src/javascripts/Components/Checkbox/CheckIndicator.tsx b/packages/web/src/javascripts/Components/Checkbox/CheckIndicator.tsx
index 9365707d0..36c4e4e6a 100644
--- a/packages/web/src/javascripts/Components/Checkbox/CheckIndicator.tsx
+++ b/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"
       />
     )}
diff --git a/packages/web/src/javascripts/Components/ClipperView/ClipperView.tsx b/packages/web/src/javascripts/Components/ClipperView/ClipperView.tsx
index 9a70b81f0..807124266 100644
--- a/packages/web/src/javascripts/Components/ClipperView/ClipperView.tsx
+++ b/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" />
diff --git a/packages/web/src/javascripts/Components/ComponentView/IsDeprecated.tsx b/packages/web/src/javascripts/Components/ComponentView/IsDeprecated.tsx
index c1b1c794f..19c506279 100644
--- a/packages/web/src/javascripts/Components/ComponentView/IsDeprecated.tsx
+++ b/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">
diff --git a/packages/web/src/javascripts/Components/ComponentView/IssueOnLoading.tsx b/packages/web/src/javascripts/Components/ComponentView/IssueOnLoading.tsx
index 7571a570c..08639726d 100644
--- a/packages/web/src/javascripts/Components/ComponentView/IssueOnLoading.tsx
+++ b/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>
diff --git a/packages/web/src/javascripts/Components/ComponentView/NotEntitledBanner.tsx b/packages/web/src/javascripts/Components/ComponentView/NotEntitledBanner.tsx
index c318635d8..de8d563ab 100644
--- a/packages/web/src/javascripts/Components/ComponentView/NotEntitledBanner.tsx
+++ b/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">
diff --git a/packages/web/src/javascripts/Components/ContentListView/Calendar/Calendar.tsx b/packages/web/src/javascripts/Components/ContentListView/Calendar/Calendar.tsx
index ffe11cb4c..70c7aa7ff 100644
--- a/packages/web/src/javascripts/Components/ContentListView/Calendar/Calendar.tsx
+++ b/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}>
diff --git a/packages/web/src/javascripts/Components/ContentListView/Calendar/InfiniteCalendar.tsx b/packages/web/src/javascripts/Components/ContentListView/Calendar/InfiniteCalendar.tsx
index 82f83a52a..276c3a32d 100644
--- a/packages/web/src/javascripts/Components/ContentListView/Calendar/InfiniteCalendar.tsx
+++ b/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',
           )}
         >
diff --git a/packages/web/src/javascripts/Components/ContentListView/Daily/DailyItemCell.tsx b/packages/web/src/javascripts/Components/ContentListView/Daily/DailyItemCell.tsx
index 7c868262a..cc825e331 100644
--- a/packages/web/src/javascripts/Components/ContentListView/Daily/DailyItemCell.tsx
+++ b/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} />
 
diff --git a/packages/web/src/javascripts/Components/ContentListView/EmptyFilesView.tsx b/packages/web/src/javascripts/Components/ContentListView/EmptyFilesView.tsx
index 47ae9fb3f..a5d996f8d 100644
--- a/packages/web/src/javascripts/Components/ContentListView/EmptyFilesView.tsx
+++ b/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>
diff --git a/packages/web/src/javascripts/Components/ContentListView/FileListItem.tsx b/packages/web/src/javascripts/Components/ContentListView/FileListItem.tsx
index 97fe843a6..a80bc9b50 100644
--- a/packages/web/src/javascripts/Components/ContentListView/FileListItem.tsx
+++ b/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>
diff --git a/packages/web/src/javascripts/Components/ContentListView/FileListItemCard.tsx b/packages/web/src/javascripts/Components/ContentListView/FileListItemCard.tsx
index 285730575..14205ed93 100644
--- a/packages/web/src/javascripts/Components/ContentListView/FileListItemCard.tsx
+++ b/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} />
diff --git a/packages/web/src/javascripts/Components/ContentListView/Header/DisplayOptionsMenu.tsx b/packages/web/src/javascripts/Components/ContentListView/Header/DisplayOptionsMenu.tsx
index d639e4862..aecc71209 100644
--- a/packages/web/src/javascripts/Components/ContentListView/Header/DisplayOptionsMenu.tsx
+++ b/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>
diff --git a/packages/web/src/javascripts/Components/ContentListView/ListItemConflictIndicator.tsx b/packages/web/src/javascripts/Components/ContentListView/ListItemConflictIndicator.tsx
index 2ba939469..15ac09dd3 100644
--- a/packages/web/src/javascripts/Components/ContentListView/ListItemConflictIndicator.tsx
+++ b/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>
diff --git a/packages/web/src/javascripts/Components/ContentListView/ListItemTags.tsx b/packages/web/src/javascripts/Components/ContentListView/ListItemTags.tsx
index 4f59c5c0c..384935535 100644
--- a/packages/web/src/javascripts/Components/ContentListView/ListItemTags.tsx
+++ b/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" />
diff --git a/packages/web/src/javascripts/Components/ContentListView/ListItemVaultInfo.tsx b/packages/web/src/javascripts/Components/ContentListView/ListItemVaultInfo.tsx
index e3dc54768..c61fbb8d2 100644
--- a/packages/web/src/javascripts/Components/ContentListView/ListItemVaultInfo.tsx
+++ b/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>
diff --git a/packages/web/src/javascripts/Components/ContentListView/NoteListItem.tsx b/packages/web/src/javascripts/Components/ContentListView/NoteListItem.tsx
index fe9bbb45d..86f4cce16 100644
--- a/packages/web/src/javascripts/Components/ContentListView/NoteListItem.tsx
+++ b/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} />
diff --git a/packages/web/src/javascripts/Components/Dropdown/Dropdown.tsx b/packages/web/src/javascripts/Components/Dropdown/Dropdown.tsx
index 9c543031c..b5f08d9a3 100644
--- a/packages/web/src/javascripts/Components/Dropdown/Dropdown.tsx
+++ b/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}
diff --git a/packages/web/src/javascripts/Components/EditorWidthSelectionModal/EditorWidthSelectionModal.tsx b/packages/web/src/javascripts/Components/EditorWidthSelectionModal/EditorWidthSelectionModal.tsx
index a07998439..6fead8227 100644
--- a/packages/web/src/javascripts/Components/EditorWidthSelectionModal/EditorWidthSelectionModal.tsx
+++ b/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',
-        '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',
+        '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-b-[6px] after:border-l-[6px] after:border-t-[6px] after:border-current after:border-b-transparent after:border-t-transparent',
         className,
       )}
     />
diff --git a/packages/web/src/javascripts/Components/FileContextMenu/FileMenuOptions.tsx b/packages/web/src/javascripts/Components/FileContextMenu/FileMenuOptions.tsx
index 4c69277c9..85ae9fbf8 100644
--- a/packages/web/src/javascripts/Components/FileContextMenu/FileMenuOptions.tsx
+++ b/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}
diff --git a/packages/web/src/javascripts/Components/FilePreview/FilePreviewModal.tsx b/packages/web/src/javascripts/Components/FilePreview/FilePreviewModal.tsx
index 83fe77f5d..3b57e67a9 100644
--- a/packages/web/src/javascripts/Components/FilePreview/FilePreviewModal.tsx
+++ b/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}
diff --git a/packages/web/src/javascripts/Components/FilePreview/ImagePreview.tsx b/packages/web/src/javascripts/Components/FilePreview/ImagePreview.tsx
index 260bf5282..b3db3ad2b 100644
--- a/packages/web/src/javascripts/Components/FilePreview/ImagePreview.tsx
+++ b/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}%
diff --git a/packages/web/src/javascripts/Components/Footer/PreferencesButton.tsx b/packages/web/src/javascripts/Components/Footer/PreferencesButton.tsx
index 657517209..9d73ce221 100644
--- a/packages/web/src/javascripts/Components/Footer/PreferencesButton.tsx
+++ b/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>
   )
diff --git a/packages/web/src/javascripts/Components/Footer/UpgradeNow.tsx b/packages/web/src/javascripts/Components/Footer/UpgradeNow.tsx
index 642eb6bfa..c43af98ff 100644
--- a/packages/web/src/javascripts/Components/Footer/UpgradeNow.tsx
+++ b/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'}
diff --git a/packages/web/src/javascripts/Components/ImportModal/ImportModalFileItem.tsx b/packages/web/src/javascripts/Components/ImportModal/ImportModalFileItem.tsx
index b52ccf7da..f2d940789 100644
--- a/packages/web/src/javascripts/Components/ImportModal/ImportModalFileItem.tsx
+++ b/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',
       )}
     >
diff --git a/packages/web/src/javascripts/Components/ImportModal/InitialPage.tsx b/packages/web/src/javascripts/Components/ImportModal/InitialPage.tsx
index 2749aa7ef..8484150d4 100644
--- a/packages/web/src/javascripts/Components/ImportModal/InitialPage.tsx
+++ b/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>
diff --git a/packages/web/src/javascripts/Components/ItemSelectionDropdown/ItemSelectionDropdown.tsx b/packages/web/src/javascripts/Components/ItemSelectionDropdown/ItemSelectionDropdown.tsx
index 6170ff40a..1ec620c8b 100644
--- a/packages/web/src/javascripts/Components/ItemSelectionDropdown/ItemSelectionDropdown.tsx
+++ b/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('')
diff --git a/packages/web/src/javascripts/Components/LinkedItems/ItemLinkAutocompleteInput.tsx b/packages/web/src/javascripts/Components/LinkedItems/ItemLinkAutocompleteInput.tsx
index 4fb108f26..f24a3111b 100644
--- a/packages/web/src/javascripts/Components/LinkedItems/ItemLinkAutocompleteInput.tsx
+++ b/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)
diff --git a/packages/web/src/javascripts/Components/LinkedItems/LinkedItemBubble.tsx b/packages/web/src/javascripts/Components/LinkedItems/LinkedItemBubble.tsx
index 27c70b8f4..690c95076 100644
--- a/packages/web/src/javascripts/Components/LinkedItems/LinkedItemBubble.tsx
+++ b/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" />
diff --git a/packages/web/src/javascripts/Components/LinkedItems/LinkedItemSearchResults.tsx b/packages/web/src/javascripts/Components/LinkedItems/LinkedItemSearchResults.tsx
index 34d197e0e..6ffa2b4f3 100644
--- a/packages/web/src/javascripts/Components/LinkedItems/LinkedItemSearchResults.tsx
+++ b/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?.()
diff --git a/packages/web/src/javascripts/Components/LinkedItems/LinkedItemSearchResultsAddTagOption.tsx b/packages/web/src/javascripts/Components/LinkedItems/LinkedItemSearchResultsAddTagOption.tsx
index 76b8bc0ae..6b5cf266e 100644
--- a/packages/web/src/javascripts/Components/LinkedItems/LinkedItemSearchResultsAddTagOption.tsx
+++ b/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' : '',
         )}
diff --git a/packages/web/src/javascripts/Components/LinkedItems/LinkedItemsPanel.tsx b/packages/web/src/javascripts/Components/LinkedItems/LinkedItemsPanel.tsx
index 317de8e0d..c1e2961bb 100644
--- a/packages/web/src/javascripts/Components/LinkedItems/LinkedItemsPanel.tsx
+++ b/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">
diff --git a/packages/web/src/javascripts/Components/Menu/MenuRadioButtonItem.tsx b/packages/web/src/javascripts/Components/Menu/MenuRadioButtonItem.tsx
index f77396227..e65983d77 100644
--- a/packages/web/src/javascripts/Components/Menu/MenuRadioButtonItem.tsx
+++ b/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}
diff --git a/packages/web/src/javascripts/Components/Modal/MobileModalAction.tsx b/packages/web/src/javascripts/Components/Modal/MobileModalAction.tsx
index ce98d6b6c..24e8a5514 100644
--- a/packages/web/src/javascripts/Components/Modal/MobileModalAction.tsx
+++ b/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,
diff --git a/packages/web/src/javascripts/Components/Modal/Modal.tsx b/packages/web/src/javascripts/Components/Modal/Modal.tsx
index c7796c521..6470aef24 100644
--- a/packages/web/src/javascripts/Components/Modal/Modal.tsx
+++ b/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',
                 )}
               >
diff --git a/packages/web/src/javascripts/Components/Modal/ModalOverlay.tsx b/packages/web/src/javascripts/Components/Modal/ModalOverlay.tsx
index 1cd72cb6d..88312522c 100644
--- a/packages/web/src/javascripts/Components/Modal/ModalOverlay.tsx
+++ b/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}
diff --git a/packages/web/src/javascripts/Components/NoSubscriptionBanner/NoSubscriptionBanner.tsx b/packages/web/src/javascripts/Components/NoSubscriptionBanner/NoSubscriptionBanner.tsx
index ad2054f3f..813e2b82d 100644
--- a/packages/web/src/javascripts/Components/NoSubscriptionBanner/NoSubscriptionBanner.tsx
+++ b/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>
diff --git a/packages/web/src/javascripts/Components/NoteView/CollaborationInfoHUD.tsx b/packages/web/src/javascripts/Components/NoteView/CollaborationInfoHUD.tsx
index 5376f0162..9fe32cf12 100644
--- a/packages/web/src/javascripts/Components/NoteView/CollaborationInfoHUD.tsx
+++ b/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>
diff --git a/packages/web/src/javascripts/Components/NoteView/NoteConflictResolutionModal/DiffView.tsx b/packages/web/src/javascripts/Components/NoteView/NoteConflictResolutionModal/DiffView.tsx
index c2f3228e3..ec3b76576 100644
--- a/packages/web/src/javascripts/Components/NoteView/NoteConflictResolutionModal/DiffView.tsx
+++ b/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>
   )
diff --git a/packages/web/src/javascripts/Components/NoteView/NoteConflictResolutionModal/NoteConflictResolutionModal.tsx b/packages/web/src/javascripts/Components/NoteView/NoteConflictResolutionModal/NoteConflictResolutionModal.tsx
index 85c6174c7..c0707770e 100644
--- a/packages/web/src/javascripts/Components/NoteView/NoteConflictResolutionModal/NoteConflictResolutionModal.tsx
+++ b/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)}
                   />
diff --git a/packages/web/src/javascripts/Components/NoteView/NoteStatusIndicator.tsx b/packages/web/src/javascripts/Components/NoteView/NoteStatusIndicator.tsx
index 236e9edfa..2aee949aa 100644
--- a/packages/web/src/javascripts/Components/NoteView/NoteStatusIndicator.tsx
+++ b/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',
-        'bg-default py-1.5 px-3 text-left peer-hover:block peer-focus:block md:min-w-max',
+        'absolute right-0 top-full min-w-[90vw] translate-x-2 translate-y-1 select-none rounded border border-border',
+        'bg-default px-3 py-1.5 text-left peer-hover:block peer-focus:block md:min-w-max',
       )}
     >
       {children}
diff --git a/packages/web/src/javascripts/Components/NoteView/NoteView.tsx b/packages/web/src/javascripts/Components/NoteView/NoteView.tsx
index 5ad7e6abd..c3846e9b9 100644
--- a/packages/web/src/javascripts/Components/NoteView/NoteView.tsx
+++ b/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}
diff --git a/packages/web/src/javascripts/Components/NoteView/NoteViewFileDropTarget.tsx b/packages/web/src/javascripts/Components/NoteView/NoteViewFileDropTarget.tsx
index 6cb71b338..0ec1ded3a 100644
--- a/packages/web/src/javascripts/Components/NoteView/NoteViewFileDropTarget.tsx
+++ b/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
 }
 
diff --git a/packages/web/src/javascripts/Components/NoteView/ReadonlyNoteContent.tsx b/packages/web/src/javascripts/Components/NoteView/ReadonlyNoteContent.tsx
index bde839e98..54df19e7e 100644
--- a/packages/web/src/javascripts/Components/NoteView/ReadonlyNoteContent.tsx
+++ b/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>
           )}
diff --git a/packages/web/src/javascripts/Components/Popover/MobilePopoverContent.tsx b/packages/web/src/javascripts/Components/Popover/MobilePopoverContent.tsx
index 0ecb3d4e9..2f43522ae 100644
--- a/packages/web/src/javascripts/Components/Popover/MobilePopoverContent.tsx
+++ b/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}>
diff --git a/packages/web/src/javascripts/Components/Popover/PositionedPopoverContent.tsx b/packages/web/src/javascripts/Components/Popover/PositionedPopoverContent.tsx
index 10412775c..5034ffcd3 100644
--- a/packages/web/src/javascripts/Components/Popover/PositionedPopoverContent.tsx
+++ b/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,
         )}
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/Account/Files.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/Account/Files.tsx
index a32083503..4fac219a1 100644
--- a/packages/web/src/javascripts/Components/Preferences/Panes/Account/Files.tsx
+++ b/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>
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/Account/NoProSubscription.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/Account/NoProSubscription.tsx
index c1560e4e2..53c418a9c 100644
--- a/packages/web/src/javascripts/Components/Preferences/Panes/Account/NoProSubscription.tsx
+++ b/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} />
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/Account/Subscription/NoSubscription.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/Account/Subscription/NoSubscription.tsx
index 131dbb7de..90bdd8d36 100644
--- a/packages/web/src/javascripts/Components/Preferences/Panes/Account/Subscription/NoSubscription.tsx
+++ b/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} />
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/Account/Subscription/SubscriptionInformation.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/Account/Subscription/SubscriptionInformation.tsx
index bdd241cad..5bd381e46 100644
--- a/packages/web/src/javascripts/Components/Preferences/Panes/Account/Subscription/SubscriptionInformation.tsx
+++ b/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} />
     </>
   )
 }
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/Account/SubscriptionSharing/InvitationsList.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/Account/SubscriptionSharing/InvitationsList.tsx
index f11037c1f..4b84e8e3a 100644
--- a/packages/web/src/javascripts/Components/Preferences/Panes/Account/SubscriptionSharing/InvitationsList.tsx
+++ b/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>
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/Appearance/EditorAppearance.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/Appearance/EditorAppearance.tsx
index de8319513..608593f05 100644
--- a/packages/web/src/javascripts/Components/Preferences/Panes/Appearance/EditorAppearance.tsx
+++ b/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}
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/General/Advanced/OfflineSubscription.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/General/Advanced/OfflineSubscription.tsx
index 31507faec..044f6fd45 100644
--- a/packages/web/src/javascripts/Components/Preferences/Panes/General/Advanced/OfflineSubscription.tsx
+++ b/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>
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/General/SmartViews/EditSmartViewModal.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/General/SmartViews/EditSmartViewModal.tsx
index 13396cc5c..6d6d12ccf 100644
--- a/packages/web/src/javascripts/Components/Preferences/Panes/General/SmartViews/EditSmartViewModal.tsx
+++ b/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)
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/HomeServer/HomeServer.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/HomeServer/HomeServer.tsx
index e2a899dcf..3cf87fd74 100644
--- a/packages/web/src/javascripts/Components/Preferences/Panes/HomeServer/HomeServer.tsx
+++ b/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>
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/HomeServer/HomeServerSettings.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/HomeServer/HomeServerSettings.tsx
index 842feb1a9..e75b3f60e 100644
--- a/packages/web/src/javascripts/Components/Preferences/Panes/HomeServer/HomeServerSettings.tsx
+++ b/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>
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/Security/EncryptionStatusItem.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/Security/EncryptionStatusItem.tsx
index d6f833228..37611dbf3 100644
--- a/packages/web/src/javascripts/Components/Preferences/Panes/Security/EncryptionStatusItem.tsx
+++ b/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>
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/Security/ErroredItems.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/Security/ErroredItems.tsx
index ba2145f4f..32172ba49 100644
--- a/packages/web/src/javascripts/Components/Preferences/Panes/Security/ErroredItems.tsx
+++ b/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={() => {
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/AuthAppInfoPopup.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/AuthAppInfoPopup.tsx
index 8d9132593..f5b78dd44 100644
--- a/packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/AuthAppInfoPopup.tsx
+++ b/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>
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Contacts/ContactItem.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Contacts/ContactItem.tsx
index ab63d9c9e..4846b334b 100644
--- a/packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Contacts/ContactItem.tsx
+++ b/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
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Contacts/EditContactModal.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Contacts/EditContactModal.tsx
index 9062c77d1..8445e7952 100644
--- a/packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Contacts/EditContactModal.tsx
+++ b/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
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Invites/InviteItem.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Invites/InviteItem.tsx
index 79c345217..a462af495 100644
--- a/packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Invites/InviteItem.tsx
+++ b/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>
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Vaults/VaultItem.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Vaults/VaultItem.tsx
index e3a40a484..7a6b3097c 100644
--- a/packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Vaults/VaultItem.tsx
+++ b/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>
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Vaults/VaultModal/EditVaultModal.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Vaults/VaultModal/EditVaultModal.tsx
index c1233f24d..4576af7ed 100644
--- a/packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Vaults/VaultModal/EditVaultModal.tsx
+++ b/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>
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Vaults/VaultModal/VaultModalInvites.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Vaults/VaultModal/VaultModalInvites.tsx
index 4a97ecece..a67838515 100644
--- a/packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Vaults/VaultModal/VaultModalInvites.tsx
+++ b/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">
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Vaults/VaultModal/VaultModalMembers.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Vaults/VaultModal/VaultModalMembers.tsx
index f6a007fe6..3cd3e5de6 100644
--- a/packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Vaults/VaultModal/VaultModalMembers.tsx
+++ b/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">
diff --git a/packages/web/src/javascripts/Components/Preferences/PreferencesComponents/MenuItem.tsx b/packages/web/src/javascripts/Components/Preferences/PreferencesComponents/MenuItem.tsx
index f7a3685bd..b78c64271 100644
--- a/packages/web/src/javascripts/Components/Preferences/PreferencesComponents/MenuItem.tsx
+++ b/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) => {
diff --git a/packages/web/src/javascripts/Components/PurchaseFlow/Panes/CreateAccount.tsx b/packages/web/src/javascripts/Components/PurchaseFlow/Panes/CreateAccount.tsx
index ed7e9da69..d0ac8a206 100644
--- a/packages/web/src/javascripts/Components/PurchaseFlow/Panes/CreateAccount.tsx
+++ b/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" />
-      <BlueDotIcon className="absolute top-[35%] -left-10 h-4 w-4" />
+      <CircleIcon className="absolute -left-28 top-[40%] h-8 w-8" />
+      <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" />
-      <BlueDotIcon className="absolute bottom-[25%] -right-10 h-4 w-4" />
-      <DiamondIcon className="absolute top-0 -right-2 -z-[1] h-18 w-18 translate-x-1/2" />
+      <CircleIcon className="absolute -right-20 bottom-[35%] h-8 w-8" />
+      <BlueDotIcon className="absolute -right-10 bottom-[25%] h-4 w-4" />
+      <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">
diff --git a/packages/web/src/javascripts/Components/PurchaseFlow/Panes/SignIn.tsx b/packages/web/src/javascripts/Components/PurchaseFlow/Panes/SignIn.tsx
index 0bb907603..4ce459082 100644
--- a/packages/web/src/javascripts/Components/PurchaseFlow/Panes/SignIn.tsx
+++ b/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" />
-      <BlueDotIcon className="absolute top-[30%] -left-40 h-4 w-4" />
+      <CircleIcon className="absolute -left-56 top-[35%] h-8 w-8" />
+      <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" />
-      <BlueDotIcon className="absolute bottom-[20%] -right-44 h-4 w-4" />
-      <DiamondIcon className="absolute top-0 -right-2 -z-[1] h-18 w-18 translate-x-1/2" />
+      <CircleIcon className="absolute -right-56 bottom-[30%] h-8 w-8" />
+      <BlueDotIcon className="absolute -right-44 bottom-[20%] h-4 w-4" />
+      <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">
diff --git a/packages/web/src/javascripts/Components/PurchaseFlow/PurchaseFlowView.tsx b/packages/web/src/javascripts/Components/PurchaseFlow/PurchaseFlowView.tsx
index d234e7109..6f989c8a4 100644
--- a/packages/web/src/javascripts/Components/PurchaseFlow/PurchaseFlowView.tsx
+++ b/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()
             }}
diff --git a/packages/web/src/javascripts/Components/Radio/RadioIndicator.tsx b/packages/web/src/javascripts/Components/Radio/RadioIndicator.tsx
index c48f60d92..fcad25f4c 100644
--- a/packages/web/src/javascripts/Components/Radio/RadioIndicator.tsx
+++ b/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>
diff --git a/packages/web/src/javascripts/Components/RadioButtonGroup/RadioButtonGroup.tsx b/packages/web/src/javascripts/Components/RadioButtonGroup/RadioButtonGroup.tsx
index c79904c75..1f002e23d 100644
--- a/packages/web/src/javascripts/Components/RadioButtonGroup/RadioButtonGroup.tsx
+++ b/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',
-            'first:rounded-tl first:rounded-bl last:rounded-tr last:rounded-br',
+            'flex-grow select-none px-3.5 py-1.5 text-center',
+            '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',
           )}
diff --git a/packages/web/src/javascripts/Components/RecoveryCodeBanner/RecoveryCodeBanner.tsx b/packages/web/src/javascripts/Components/RecoveryCodeBanner/RecoveryCodeBanner.tsx
index 7f0e26ad6..3c6dd1911 100644
--- a/packages/web/src/javascripts/Components/RecoveryCodeBanner/RecoveryCodeBanner.tsx
+++ b/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)
               }}
diff --git a/packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalContentPane.tsx b/packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalContentPane.tsx
index 7b4d13100..076a41ba5 100644
--- a/packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalContentPane.tsx
+++ b/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
diff --git a/packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalDialog.tsx b/packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalDialog.tsx
index 3cc04ecdd..09f428152 100644
--- a/packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalDialog.tsx
+++ b/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(),
         )}
diff --git a/packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalDialogContent.tsx b/packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalDialogContent.tsx
index 3bbace559..169e9b741 100644
--- a/packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalDialogContent.tsx
+++ b/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" />
diff --git a/packages/web/src/javascripts/Components/RevisionHistoryModal/RemoteHistoryList.tsx b/packages/web/src/javascripts/Components/RevisionHistoryModal/RemoteHistoryList.tsx
index 7ce497bca..cf08883b4 100644
--- a/packages/web/src/javascripts/Components/RevisionHistoryModal/RemoteHistoryList.tsx
+++ b/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) => (
diff --git a/packages/web/src/javascripts/Components/RevisionHistoryModal/RevisionContentLocked.tsx b/packages/web/src/javascripts/Components/RevisionHistoryModal/RevisionContentLocked.tsx
index 730d329bb..73866f4c1 100644
--- a/packages/web/src/javascripts/Components/RevisionHistoryModal/RevisionContentLocked.tsx
+++ b/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>
diff --git a/packages/web/src/javascripts/Components/RevisionHistoryModal/SessionHistoryList.tsx b/packages/web/src/javascripts/Components/RevisionHistoryModal/SessionHistoryList.tsx
index 144cde6b0..5f21eebfb 100644
--- a/packages/web/src/javascripts/Components/RevisionHistoryModal/SessionHistoryList.tsx
+++ b/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) => (
diff --git a/packages/web/src/javascripts/Components/SearchBar/SearchBar.tsx b/packages/web/src/javascripts/Components/SearchBar/SearchBar.tsx
index a5a12372e..011e2f078 100644
--- a/packages/web/src/javascripts/Components/SearchBar/SearchBar.tsx
+++ b/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}
diff --git a/packages/web/src/javascripts/Components/Shared/CopyableCodeBlock.tsx b/packages/web/src/javascripts/Components/Shared/CopyableCodeBlock.tsx
index 48531d78d..c66b78363 100644
--- a/packages/web/src/javascripts/Components/Shared/CopyableCodeBlock.tsx
+++ b/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'}
diff --git a/packages/web/src/javascripts/Components/SmartViewBuilder/AddSmartViewModal.tsx b/packages/web/src/javascripts/Components/SmartViewBuilder/AddSmartViewModal.tsx
index 26fed40ae..fe6cc6271 100644
--- a/packages/web/src/javascripts/Components/SmartViewBuilder/AddSmartViewModal.tsx
+++ b/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"
diff --git a/packages/web/src/javascripts/Components/SmartViewBuilder/CompoundPredicateBuilder.tsx b/packages/web/src/javascripts/Components/SmartViewBuilder/CompoundPredicateBuilder.tsx
index c66ff8d28..67b0decc9 100644
--- a/packages/web/src/javascripts/Components/SmartViewBuilder/CompoundPredicateBuilder.tsx
+++ b/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>
diff --git a/packages/web/src/javascripts/Components/SmartViewBuilder/PredicateValue.tsx b/packages/web/src/javascripts/Components/SmartViewBuilder/PredicateValue.tsx
index ed82024d3..63f652a4a 100644
--- a/packages/web/src/javascripts/Components/SmartViewBuilder/PredicateValue.tsx
+++ b/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)
diff --git a/packages/web/src/javascripts/Components/StyledTooltip/StyledTooltip.tsx b/packages/web/src/javascripts/Components/StyledTooltip/StyledTooltip.tsx
index 69207c1d3..c9c25887d 100644
--- a/packages/web/src/javascripts/Components/StyledTooltip/StyledTooltip.tsx
+++ b/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={() => {
diff --git a/packages/web/src/javascripts/Components/SuperEditor/BlocksEditor.tsx b/packages/web/src/javascripts/Components/SuperEditor/BlocksEditor.tsx
index e2aedf071..c99faf59b 100644
--- a/packages/web/src/javascripts/Components/SuperEditor/BlocksEditor.tsx
+++ b/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>
         }
diff --git a/packages/web/src/javascripts/Components/SuperEditor/Plugins/CodeOptionsPlugin/CodeOptions.tsx b/packages/web/src/javascripts/Components/SuperEditor/Plugins/CodeOptionsPlugin/CodeOptions.tsx
index 388d5c675..42033db05 100644
--- a/packages/web/src/javascripts/Components/SuperEditor/Plugins/CodeOptionsPlugin/CodeOptions.tsx
+++ b/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]) => ({
diff --git a/packages/web/src/javascripts/Components/SuperEditor/Plugins/FloatingLinkEditorPlugin/index.tsx b/packages/web/src/javascripts/Components/SuperEditor/Plugins/FloatingLinkEditorPlugin/index.tsx
index 71fa94369..2da420ed9 100644
--- a/packages/web/src/javascripts/Components/SuperEditor/Plugins/FloatingLinkEditorPlugin/index.tsx
+++ b/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}
diff --git a/packages/web/src/javascripts/Components/SuperEditor/Plugins/FloatingTextFormatToolbarPlugin/index.tsx b/packages/web/src/javascripts/Components/SuperEditor/Plugins/FloatingTextFormatToolbarPlugin/index.tsx
index fb9fd1db3..cef98e12e 100644
--- a/packages/web/src/javascripts/Components/SuperEditor/Plugins/FloatingTextFormatToolbarPlugin/index.tsx
+++ b/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
diff --git a/packages/web/src/javascripts/Components/SuperEditor/Plugins/MobileToolbarPlugin/MobileToolbarPlugin.tsx b/packages/web/src/javascripts/Components/SuperEditor/Plugins/MobileToolbarPlugin/MobileToolbarPlugin.tsx
index 9e89226ca..a1bcf90a5 100644
--- a/packages/web/src/javascripts/Components/SuperEditor/Plugins/MobileToolbarPlugin/MobileToolbarPlugin.tsx
+++ b/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" />
diff --git a/packages/web/src/javascripts/Components/SuperEditor/Plugins/SearchPlugin/SearchDialog.tsx b/packages/web/src/javascripts/Components/SuperEditor/Plugins/SearchPlugin/SearchDialog.tsx
index eef86e053..43ad24084 100644
--- a/packages/web/src/javascripts/Components/SuperEditor/Plugins/SearchPlugin/SearchDialog.tsx
+++ b/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({
diff --git a/packages/web/src/javascripts/Components/SyncResolutionMenu/SyncResolutionMenu.tsx b/packages/web/src/javascripts/Components/SyncResolutionMenu/SyncResolutionMenu.tsx
index 527867366..25f48f7cf 100644
--- a/packages/web/src/javascripts/Components/SyncResolutionMenu/SyncResolutionMenu.tsx
+++ b/packages/web/src/javascripts/Components/SyncResolutionMenu/SyncResolutionMenu.tsx
@@ -20,7 +20,7 @@ class SyncResolutionMenu extends AbstractComponent<Props> {
       <div className="sn-component">
         <div
           id="sync-resolution-menu"
-          className="absolute right-0 left-[inherit] bottom-[40px] z-footer-bar-item-panel mt-4 flex max-h-[85vh] min-w-[300px] flex-col border border-solid border-border bg-default shadow-main"
+          className="absolute bottom-[40px] left-[inherit] right-0 z-footer-bar-item-panel mt-4 flex max-h-[85vh] min-w-[300px] flex-col border border-solid border-border bg-default shadow-main"
         >
           <div className="flex flex-shrink-0 items-center justify-between border-b border-solid border-border bg-contrast px-6 py-3 text-text">
             <div className="text-base font-medium">Out of Sync</div>
diff --git a/packages/web/src/javascripts/Components/Table/Table.tsx b/packages/web/src/javascripts/Components/Table/Table.tsx
index 04d75e58b..1175398bc 100644
--- a/packages/web/src/javascripts/Components/Table/Table.tsx
+++ b/packages/web/src/javascripts/Components/Table/Table.tsx
@@ -59,7 +59,7 @@ function TableRow<Data>({
             aria-colindex={cell.colIndex + 1}
             key={index}
             className={classNames(
-              'relative flex items-center overflow-hidden border-b border-border py-4 px-3 focus:border-info',
+              'relative flex items-center overflow-hidden border-b border-border px-3 py-4 focus:border-info',
               row.isSelected && 'bg-info-backdrop',
               canSelectRows && 'cursor-pointer',
               canSelectRows && isHoveredOrFocused && 'bg-contrast',
@@ -78,7 +78,7 @@ function TableRow<Data>({
                 <div className="z-[1]">{row.rowActions}</div>
                 <div
                   className={classNames(
-                    'absolute top-0 right-0 z-0 h-full w-full backdrop-blur-[2px]',
+                    'absolute right-0 top-0 z-0 h-full w-full backdrop-blur-[2px]',
                     row.isSelected ? '' : isHoveredOrFocused ? '' : 'invisible',
                   )}
                 />
@@ -388,7 +388,7 @@ function Table<Data>({ table }: { table: Table<Data> }) {
                   aria-colindex={header.colIndex + 1}
                   aria-sort={header.isSorting ? (header.sortReversed ? 'descending' : 'ascending') : 'none'}
                   className={classNames(
-                    'border-b border-border px-3 pt-3 pb-2 text-left text-sm font-medium text-passive-0',
+                    'border-b border-border px-3 pb-2 pt-3 text-left text-sm font-medium text-passive-0',
                     header.sortBy &&
                       'cursor-pointer hover:bg-info-backdrop hover:underline focus:border-info focus:bg-info-backdrop',
                   )}
diff --git a/packages/web/src/javascripts/Components/Tags/TagContextMenu.tsx b/packages/web/src/javascripts/Components/Tags/TagContextMenu.tsx
index a25bcfd7d..5a3834713 100644
--- a/packages/web/src/javascripts/Components/Tags/TagContextMenu.tsx
+++ b/packages/web/src/javascripts/Components/Tags/TagContextMenu.tsx
@@ -112,7 +112,7 @@ const TagContextMenu = ({ navigationController, isEntitledToFolders, selectedTag
           </MenuItem>
         </Menu>
         <HorizontalSeparator classes="my-2" />
-        <div className="px-3 pt-1 pb-1.5 text-sm font-medium text-neutral lg:text-xs">
+        <div className="px-3 pb-1.5 pt-1 text-sm font-medium text-neutral lg:text-xs">
           <div className="mb-1">
             <span className="font-semibold">Last modified:</span> {tagLastModified}
           </div>
diff --git a/packages/web/src/javascripts/Components/Vaults/VaultNameBadge.tsx b/packages/web/src/javascripts/Components/Vaults/VaultNameBadge.tsx
index f2456c6b4..62144d56d 100644
--- a/packages/web/src/javascripts/Components/Vaults/VaultNameBadge.tsx
+++ b/packages/web/src/javascripts/Components/Vaults/VaultNameBadge.tsx
@@ -8,7 +8,7 @@ type Props = {
 
 const VaultNameBadge: FunctionComponent<Props> = ({ vault }) => {
   return (
-    <div className={'rounded bg-success py-1 px-1.5 text-danger-contrast'}>
+    <div className={'rounded bg-success px-1.5 py-1 text-danger-contrast'}>
       <span className="flex items-center" title="Vault name">
         <Icon ariaLabel="Vault name" type="safe-square" className="mr-1 text-info-contrast" size="medium" />
         <div className="text-center text-xs font-bold">{vault.name}</div>