diff --git a/web/src/pages/EmailList.tsx b/web/src/pages/EmailList.tsx
index 668481d8e0..eee37aefd4 100644
--- a/web/src/pages/EmailList.tsx
+++ b/web/src/pages/EmailList.tsx
@@ -203,7 +203,7 @@ export default function EmailList() {
   }
 
   return (
-    <>
+    <div className="preflight">
       <div ref={menuRef} className="mb-4">
         <EmailMenuBar
           emailIDs={selected}
@@ -237,6 +237,6 @@ export default function EmailList() {
           loadMoreEmails={loadMoreEmails}
         />
       </div>
-    </>
+    </div>
   )
 }
diff --git a/web/src/pages/EmailRawView.tsx b/web/src/pages/EmailRawView.tsx
index 346927a002..1af551de62 100644
--- a/web/src/pages/EmailRawView.tsx
+++ b/web/src/pages/EmailRawView.tsx
@@ -33,66 +33,68 @@ export default function EmailRawView() {
   }
 
   return (
-    <div className="w-full px-2 py-2 md:px-8 md:py-5">
-      <h1 className="text-lg font-light tracking-wider dark:text-white md:px-1 md:pb-4">
-        Original Email
-      </h1>
-      <div className="flex rounded-md dark:text-neutral-300">
-        <span className="flex-initial rounded-l bg-blue-200 px-2 py-1 dark:bg-neutral-700/70">
-          MessageID
-        </span>
-        <span className="flex-1 rounded-r bg-blue-50 px-2 py-1 dark:bg-neutral-800 md:px-4">
-          {data.messageID}
-        </span>
-      </div>
-      <div className="relative mt-5 rounded-md border p-5 text-sm dark:border-neutral-700 dark:text-neutral-400">
-        <React.Suspense fallback={<div>Loading...</div>}>
-          <Await resolve={data.raw}>
-            {(raw: string) => (
-              <>
-                <pre className="block w-full whitespace-pre-wrap break-words">
-                  {raw}
-                </pre>
+    <div className="preflight">
+      <div className="w-full px-2 py-2 md:px-8 md:py-5">
+        <h1 className="text-lg font-light tracking-wider dark:text-white md:px-1 md:pb-4">
+          Original Email
+        </h1>
+        <div className="flex rounded-md dark:text-neutral-300">
+          <span className="flex-initial rounded-l bg-blue-200 px-2 py-1 dark:bg-neutral-700/70">
+            MessageID
+          </span>
+          <span className="flex-1 rounded-r bg-blue-50 px-2 py-1 dark:bg-neutral-800 md:px-4">
+            {data.messageID}
+          </span>
+        </div>
+        <div className="relative mt-5 rounded-md border p-5 text-sm dark:border-neutral-700 dark:text-neutral-400">
+          <React.Suspense fallback={<div>Loading...</div>}>
+            <Await resolve={data.raw}>
+              {(raw: string) => (
+                <>
+                  <pre className="block w-full whitespace-pre-wrap break-words">
+                    {raw}
+                  </pre>
 
-                <div className="absolute right-0 top-2 space-x-3 p-3 dark:text-neutral-400">
-                  <span
-                    role="button"
-                    className="cursor-pointer rounded-md bg-blue-100 p-2 dark:bg-neutral-700"
-                    onClick={reparse}
-                  >
-                    <span>Re-Parse</span>
-                  </span>
-                  <span
-                    role="button"
-                    className="cursor-pointer rounded-md bg-blue-100 p-2 dark:bg-neutral-700"
-                    onClick={() => {
-                      void navigator.clipboard.writeText(raw)
-                    }}
-                  >
-                    <span>Copy</span>
-                  </span>
-                  <span
-                    role="button"
-                    className="cursor-pointer rounded-md bg-blue-100 p-2 dark:bg-neutral-700"
-                    onClick={() => {
-                      const blob = new Blob([raw], { type: 'message/rfc822' })
-                      const url = URL.createObjectURL(blob)
-                      const a = document.createElement('a')
-                      a.href = url
-                      a.download = `${data.messageID}.eml`
-                      a.click()
-                    }}
-                  >
-                    <span>Download</span>
-                  </span>
-                </div>
-              </>
-            )}
-          </Await>
-        </React.Suspense>
-      </div>
+                  <div className="absolute right-0 top-2 space-x-3 p-3 dark:text-neutral-400">
+                    <span
+                      role="button"
+                      className="cursor-pointer rounded-md bg-blue-100 p-2 dark:bg-neutral-700"
+                      onClick={reparse}
+                    >
+                      <span>Re-Parse</span>
+                    </span>
+                    <span
+                      role="button"
+                      className="cursor-pointer rounded-md bg-blue-100 p-2 dark:bg-neutral-700"
+                      onClick={() => {
+                        void navigator.clipboard.writeText(raw)
+                      }}
+                    >
+                      <span>Copy</span>
+                    </span>
+                    <span
+                      role="button"
+                      className="cursor-pointer rounded-md bg-blue-100 p-2 dark:bg-neutral-700"
+                      onClick={() => {
+                        const blob = new Blob([raw], { type: 'message/rfc822' })
+                        const url = URL.createObjectURL(blob)
+                        const a = document.createElement('a')
+                        a.href = url
+                        a.download = `${data.messageID}.eml`
+                        a.click()
+                      }}
+                    >
+                      <span>Download</span>
+                    </span>
+                  </div>
+                </>
+              )}
+            </Await>
+          </React.Suspense>
+        </div>
 
-      <Toaster />
+        <Toaster />
+      </div>
     </div>
   )
 }
diff --git a/web/src/pages/EmailRoot.tsx b/web/src/pages/EmailRoot.tsx
index de95b59354..f16232bc8e 100644
--- a/web/src/pages/EmailRoot.tsx
+++ b/web/src/pages/EmailRoot.tsx
@@ -172,23 +172,29 @@ export default function EmailRoot(props: EmailRootProps) {
             : 'h-full')
         }
       >
-        <h1 className="text-lg font-light tracking-wider dark:text-white md:px-2 md:pb-4">
-          {props.type === 'inbox'
-            ? 'Inbox'
-            : props.type === 'draft'
-              ? 'Drafts'
-              : 'Sent'}
-        </h1>
+        <div className="preflight">
+          <h1 className="text-lg font-light tracking-wider dark:text-white md:px-2 md:pb-4">
+            {props.type === 'inbox'
+              ? 'Inbox'
+              : props.type === 'draft'
+                ? 'Drafts'
+                : 'Sent'}
+          </h1>
+        </div>
         <Outlet context={outletContext} />
       </div>
 
-      <FullScreenContent
-        handleDelete={(messageID) => {
-          removeEmailFromList(messageID)
-        }}
-      />
+      <div className="preflight">
+        <FullScreenContent
+          handleDelete={(messageID) => {
+            removeEmailFromList(messageID)
+          }}
+        />
+      </div>
 
-      <DraftEmailsTabs />
+      <div className="preflight">
+        <DraftEmailsTabs />
+      </div>
     </div>
   )
 }
diff --git a/web/src/pages/EmailView.tsx b/web/src/pages/EmailView.tsx
index 59559d7bc0..0d175fbb5e 100644
--- a/web/src/pages/EmailView.tsx
+++ b/web/src/pages/EmailView.tsx
@@ -186,7 +186,7 @@ export default function EmailView() {
 
   return (
     <>
-      <div className="mb-4">
+      <div className="mb-4 preflight">
         <EmailMenuBar
           emailIDs={'messageID' in data ? [data.messageID] : []}
           showOperations={true}
@@ -274,7 +274,7 @@ export default function EmailView() {
                   />
                 )}
                 {thread.draftID && !activeReplyEmail && (
-                  <div className="mb-4 rounded-md bg-neutral-50 p-3 dark:bg-neutral-800">
+                  <div className="preflight mb-4 rounded-md bg-neutral-50 p-3 dark:bg-neutral-800">
                     <div className="flex items-start justify-between">
                       <span className="text-red-300">[Draft]</span>
                       <span className="text-neutral-500 dark:text-neutral-300">
@@ -328,7 +328,7 @@ function EmailBlock(props: EmailBlockProps) {
     <>
       <div className="mb-4 rounded-md bg-neutral-50 p-3 dark:bg-neutral-800">
         {!showImages && (
-          <div className="flex gap-2 border rounded-t-md -mx-3 -mt-3 px-3 py-1 mb-3 bg-gray-200 dark:bg-gray-700">
+          <div className="preflight flex gap-2 border rounded-t-md -mx-3 -mt-3 px-3 py-1 mb-3 bg-gray-200 dark:bg-gray-700">
             <span>Images are not displayed</span>
             <span
               className="text-blue-600 dark:text-blue-200 cursor-pointer"
@@ -342,7 +342,7 @@ function EmailBlock(props: EmailBlockProps) {
         )}
 
         {/* header info for emails */}
-        <div className="flex items-start justify-between">
+        <div className="preflight flex items-start justify-between">
           <div className="dark:text-neutral-300">
             <div>
               <span>{getNameFromEmails(email.from)}</span>
diff --git a/web/src/pages/Root.tsx b/web/src/pages/Root.tsx
index 4725c73562..13d15adefe 100644
--- a/web/src/pages/Root.tsx
+++ b/web/src/pages/Root.tsx
@@ -40,11 +40,15 @@ export default function Root() {
           dispatch: draftEmailsDispatch
         }}
       >
-        <Sidebar />
+        <div className="preflight">
+          <Sidebar />
+        </div>
         <Outlet />
       </DraftEmailsContext.Provider>
 
-      <Toaster />
+      <div className="preflight">
+        <Toaster />
+      </div>
     </ConfigContext.Provider>
   )
 }
diff --git a/web/src/preflight.css b/web/src/preflight.css
index 0ad5808680..40197a2306 100644
--- a/web/src/preflight.css
+++ b/web/src/preflight.css
@@ -55,7 +55,7 @@ body {
 3. Ensure horizontal rules are visible by default.
 */
 
-hr:not(.email-sandbox *) {
+.preflight hr {
   height: 0; /* 1 */
   color: inherit; /* 2 */
   border-top-width: 1px; /* 3 */
@@ -65,7 +65,7 @@ hr:not(.email-sandbox *) {
 Add the correct text decoration in Chrome, Edge, and Safari.
 */
 
-abbr:where([title]):not(.email-sandbox *) {
+.preflight abbr:where([title]) {
   text-decoration: underline dotted;
 }
 
@@ -73,12 +73,12 @@ abbr:where([title]):not(.email-sandbox *) {
 Remove the default font size and weight for headings.
 */
 
-h1:not(.email-sandbox *),
-h2:not(.email-sandbox *),
-h3:not(.email-sandbox *),
-h4:not(.email-sandbox *),
-h5:not(.email-sandbox *),
-h6:not(.email-sandbox *) {
+.preflight h1,
+.preflight h2,
+.preflight h3,
+.preflight h4,
+.preflight h5,
+.preflight h6 {
   font-size: inherit;
   font-weight: inherit;
 }
@@ -87,7 +87,7 @@ h6:not(.email-sandbox *) {
 Reset links to optimize for opt-in styling instead of opt-out.
 */
 
-a:not(.email-sandbox *) {
+.preflight a {
   color: inherit;
   text-decoration: inherit;
 }
@@ -96,8 +96,8 @@ a:not(.email-sandbox *) {
 Add the correct font weight in Edge and Safari.
 */
 
-b:not(.email-sandbox *),
-strong:not(.email-sandbox *) {
+.preflight b,
+.preflight strong {
   font-weight: bolder;
 }
 
@@ -108,10 +108,10 @@ strong:not(.email-sandbox *) {
 4. Correct the odd `em` font sizing in all browsers.
 */
 
-code:not(.email-sandbox *),
-kbd:not(.email-sandbox *),
-samp:not(.email-sandbox *),
-pre:not(.email-sandbox *) {
+.preflight code,
+.preflight kbd,
+.preflight samp,
+.preflight pre {
   font-family: theme('fontFamily.mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); /* 1 */
   font-feature-settings: theme('fontFamily.mono[1].fontFeatureSettings', normal); /* 2 */
   font-variation-settings: theme('fontFamily.mono[1].fontVariationSettings', normal); /* 3 */
@@ -122,7 +122,7 @@ pre:not(.email-sandbox *) {
 Add the correct font size in all browsers.
 */
 
-small:not(.email-sandbox *) {
+.preflight small {
   font-size: 80%;
 }
 
@@ -130,19 +130,19 @@ small:not(.email-sandbox *) {
 Prevent `sub` and `sup` elements from affecting the line height in all browsers.
 */
 
-sub:not(.email-sandbox *),
-sup:not(.email-sandbox *) {
+.preflight sub,
+.preflight sup {
   font-size: 75%;
   line-height: 0;
   position: relative;
   vertical-align: baseline;
 }
 
-sub:not(.email-sandbox *) {
+.preflight sub {
   bottom: -0.25em;
 }
 
-sup:not(.email-sandbox *) {
+.preflight sup {
   top: -0.5em;
 }
 
@@ -152,7 +152,7 @@ sup:not(.email-sandbox *) {
 3. Remove gaps between table borders by default.
 */
 
-table:not(.email-sandbox *) {
+.preflight table {
   text-indent: 0; /* 1 */
   border-color: inherit; /* 2 */
   border-collapse: collapse; /* 3 */
@@ -164,11 +164,11 @@ table:not(.email-sandbox *) {
 3. Remove default padding in all browsers.
 */
 
-button:not(.email-sandbox *),
-input:not(.email-sandbox *),
-optgroup:not(.email-sandbox *),
-select:not(.email-sandbox *),
-textarea:not(.email-sandbox *) {
+.preflight button,
+.preflight input,
+.preflight optgroup,
+.preflight select,
+.preflight textarea {
   font-family: inherit; /* 1 */
   font-feature-settings: inherit; /* 1 */
   font-variation-settings: inherit; /* 1 */
@@ -184,8 +184,8 @@ textarea:not(.email-sandbox *) {
 Remove the inheritance of text transform in Edge and Firefox.
 */
 
-button:not(.email-sandbox *),
-select:not(.email-sandbox *) {
+.preflight button,
+.preflight select {
   text-transform: none;
 }
 
@@ -194,10 +194,10 @@ select:not(.email-sandbox *) {
 2. Remove default button styles.
 */
 
-button:not(.email-sandbox *),
-[type='button']:not(.email-sandbox *),
-[type='reset']:not(.email-sandbox *),
-[type='submit']:not(.email-sandbox *) {
+.preflight  button,
+.preflight  [type='button'],
+.preflight  [type='reset'],
+.preflight  [type='submit'] {
   -webkit-appearance: button; /* 1 */
   background-color: transparent; /* 2 */
   background-image: none; /* 2 */
@@ -223,7 +223,7 @@ Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/
 Add the correct vertical alignment in Chrome and Firefox.
 */
 
-progress:not(.email-sandbox *) {
+.preflight progress {
   vertical-align: baseline;
 }
 
@@ -241,7 +241,7 @@ Correct the cursor style of increment and decrement buttons in Safari.
 2. Correct the outline style in Safari.
 */
 
-[type='search'] {
+.preflight [type='search'] {
   -webkit-appearance: textfield; /* 1 */
   outline-offset: -2px; /* 2 */
 }
@@ -268,7 +268,7 @@ Remove the inner padding in Chrome and Safari on macOS.
 Add the correct display in Chrome and Safari.
 */
 
-summary:not(.email-sandbox *) {
+.preflight summary {
   display: list-item;
 }
 
@@ -276,40 +276,40 @@ summary:not(.email-sandbox *) {
 Removes the default spacing for appropriate elements.
 */
 
-blockquote:not(.email-sandbox *),
-dl:not(.email-sandbox *),
-dd:not(.email-sandbox *),
-h1:not(.email-sandbox *),
-h2:not(.email-sandbox *),
-h3:not(.email-sandbox *),
-h4:not(.email-sandbox *),
-h5:not(.email-sandbox *),
-h6:not(.email-sandbox *),
-hr:not(.email-sandbox *),
-figure:not(.email-sandbox *),
-p:not(.email-sandbox *),
-pre:not(.email-sandbox *) {
+.preflight blockquote,
+.preflight dl,
+.preflight dd,
+.preflight h1,
+.preflight h2,
+.preflight h3,
+.preflight h4,
+.preflight h5,
+.preflight h6,
+.preflight hr,
+.preflight figure,
+.preflight p,
+.preflight pre {
   margin: 0;
 }
 
-fieldset:not(.email-sandbox *) {
+.preflight fieldset {
   margin: 0;
   padding: 0;
 }
 
-legend:not(.email-sandbox *) {
+.preflight legend {
   padding: 0;
 }
 
-ol,
-ul,
-menu {
+.preflight ol,
+.preflight ul,
+.preflight menu {
   list-style: none;
   margin: 0;
   padding: 0;
 }
 
-dialog {
+.preflight dialog {
   padding: 0;
 }
 
@@ -317,7 +317,7 @@ dialog {
 Prevent resizing textareas horizontally by default.
 */
 
-textarea {
+.preflight textarea {
   resize: vertical;
 }
 
@@ -326,8 +326,8 @@ textarea {
 2. Set the default placeholder color to the user's configured gray 400 color.
 */
 
-input::placeholder,
-textarea::placeholder {
+.preflight input::placeholder,
+.preflight textarea::placeholder {
   opacity: 1; /* 1 */
   color: theme('colors.gray.400', #9ca3af); /* 2 */
 }
@@ -336,7 +336,7 @@ textarea::placeholder {
 Set the default cursor for buttons.
 */
 
-button,
+.preflight button,
 [role="button"] {
   cursor: pointer;
 }
@@ -345,7 +345,7 @@ button,
 Make sure disabled buttons don't get the pointer cursor.
 */
 
-:disabled:not(.email-sandbox *) {
+:disabled {
   cursor: default;
 }
 
@@ -355,14 +355,14 @@ Make sure disabled buttons don't get the pointer cursor.
    This can trigger a poorly considered lint error in some tools but is included by design.
 */
 
-img:not(.email-sandbox *),
-svg:not(.email-sandbox *),
-video:not(.email-sandbox *),
-canvas:not(.email-sandbox *),
-audio:not(.email-sandbox *),
-iframe:not(.email-sandbox *),
-embed:not(.email-sandbox *),
-object:not(.email-sandbox *) {
+.preflight img,
+.preflight svg,
+.preflight video,
+.preflight canvas,
+.preflight audio,
+.preflight iframe,
+.preflight embed,
+.preflight object {
   display: block; /* 1 */
   vertical-align: middle; /* 2 */
 }
@@ -371,8 +371,8 @@ object:not(.email-sandbox *) {
 Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
 */
 
-img:not(.email-sandbox *),
-video:not(.email-sandbox *) {
+.preflight img,
+.preflight video {
   max-width: 100%;
   height: auto;
 }
@@ -381,6 +381,6 @@ video:not(.email-sandbox *) {
 Make elements with the HTML hidden attribute stay hidden by default.
 */
 
-[hidden]:not(.email-sandbox *) {
+[hidden] {
   display: none;
 }