diff --git a/src/routes/_components/compose/ComposeAutosuggest.html b/src/routes/_components/compose/ComposeAutosuggest.html
index 5dda60b..f2a04e3 100644
--- a/src/routes/_components/compose/ComposeAutosuggest.html
+++ b/src/routes/_components/compose/ComposeAutosuggest.html
@@ -16,7 +16,7 @@
     opacity: 0;
     transition: opacity 0.1s linear;
     min-width: 400px;
-    max-width: calc(100vw - 20px);
+    max-width: calc(100% - 20px);
     z-index: 7000;
   }
   .compose-autosuggest.is-dialog {
diff --git a/src/routes/_components/compose/ComposeBox.html b/src/routes/_components/compose/ComposeBox.html
index da5a726..20487c0 100644
--- a/src/routes/_components/compose/ComposeBox.html
+++ b/src/routes/_components/compose/ComposeBox.html
@@ -39,19 +39,12 @@
       "avatar toolbar    toolbar   length"
       "avatar media      media     media";
     grid-template-columns: min-content minmax(0, max-content) 1fr 1fr;
-    width: 560px;
-    max-width: calc(100vw - 40px);
   }
 
   .compose-box.direct-reply {
     background-color: var(--status-direct-background);
   }
 
-  .compose-box.slim-size {
-    width: 540px;
-    max-width: calc(100vw - 60px);
-  }
-
   .compose-box-fade-in {
     transition: opacity 0.2s linear; /* main page reveal */
   }
@@ -69,13 +62,6 @@
   @media (max-width: 767px) {
     .compose-box {
       padding: 10px 10px 0 10px;
-      max-width: calc(100vw - 20px);
-      width: 580px;
-    }
-
-    .compose-box.slim-size {
-      width: 560px;
-      max-width: calc(100vw - 40px);
     }
 
     .compose-box-realm-dialog {
@@ -142,7 +128,6 @@
         'compose-box',
         `compose-box-realm-${realm}`,
         overLimit && 'over-char-limit',
-        size === 'slim' && 'slim-size',
         isReply && postPrivacyKey === 'direct' && 'direct-reply'
       )),
       hideAndFadeIn: ({ hidden }) => (classname(
diff --git a/src/routes/_components/compose/ComposeFileDrop.html b/src/routes/_components/compose/ComposeFileDrop.html
index 9cb5cb3..0112598 100644
--- a/src/routes/_components/compose/ComposeFileDrop.html
+++ b/src/routes/_components/compose/ComposeFileDrop.html
@@ -11,6 +11,8 @@
   .file-drop {
     display: block;
     position: relative;
+    max-width: 100%;
+    width: 100%;
   }
 
   .file-drop-info {
diff --git a/src/routes/_components/dialog/components/ComposeDialog.html b/src/routes/_components/dialog/components/ComposeDialog.html
index 41cc794..78415fc 100644
--- a/src/routes/_components/dialog/components/ComposeDialog.html
+++ b/src/routes/_components/dialog/components/ComposeDialog.html
@@ -4,7 +4,7 @@
   {title}
   background="var(--main-bg)"
 >
-  <ComposeBox realm="dialog" size="slim" autoFocus="true" />
+  <ComposeBox realm="dialog" autoFocus="true" />
 </ModalDialog>
 <script>
   import ModalDialog from './ModalDialog.html'
@@ -37,4 +37,4 @@
       ComposeBox
     }
   }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/routes/_components/dialog/components/CopyDialog.html b/src/routes/_components/dialog/components/CopyDialog.html
index 6150762..7f16609 100644
--- a/src/routes/_components/dialog/components/CopyDialog.html
+++ b/src/routes/_components/dialog/components/CopyDialog.html
@@ -21,7 +21,7 @@
     grid-gap: 10px;
     padding: 10px 20px;
     width: 400px;
-    max-width: calc(100vw - 40px);
+    max-width: calc(100% - 40px);
   }
 </style>
 <script>
diff --git a/src/routes/_components/dialog/components/GenericDialogList.html b/src/routes/_components/dialog/components/GenericDialogList.html
index b68d6ae..39494f9 100644
--- a/src/routes/_components/dialog/components/GenericDialogList.html
+++ b/src/routes/_components/dialog/components/GenericDialogList.html
@@ -21,7 +21,6 @@
     border: 1px solid var(--settings-list-item-border);
     box-sizing: border-box;
     min-width: 350px;
-    max-width: calc(100vw - 20px);
   }
   .generic-dialog-list-item {
     border: 1px solid var(--settings-list-item-border);
@@ -69,7 +68,7 @@
 
   @media (max-width: 479px) {
     .generic-dialog-list {
-      min-width: calc(100vw - 20px);
+      min-width: calc(100% - 20px);
     }
     .generic-dialog-list-button {
       padding: 15px 10px;
diff --git a/src/routes/_components/dialog/components/MediaDialog.html b/src/routes/_components/dialog/components/MediaDialog.html
index b4e5772..7b84505 100644
--- a/src/routes/_components/dialog/components/MediaDialog.html
+++ b/src/routes/_components/dialog/components/MediaDialog.html
@@ -79,7 +79,7 @@
 <Shortcut scope='modal-{id}' key="ArrowRight" on:pressed="next()" />
 <style>
   :global(.media-modal-dialog) {
-    max-width: calc(100vw);
+    max-width: calc(100%);
   }
   .media-container {
     height: calc(100% - 64px); /* 44px X button height + 20px padding */
diff --git a/src/routes/_components/dialog/components/ModalDialog.html b/src/routes/_components/dialog/components/ModalDialog.html
index d338465..48745e5 100644
--- a/src/routes/_components/dialog/components/ModalDialog.html
+++ b/src/routes/_components/dialog/components/ModalDialog.html
@@ -59,6 +59,8 @@
     display: flex;
     flex-direction: row;
     max-height: calc(100% - 20px);
+    max-width: calc(100% - 20px);
+    flex: 0 1 580px;
   }
   .modal-dialog-contents.should-animate {
     transition: opacity 0.2s linear;
@@ -69,7 +71,8 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    max-width: calc(100vw - 20px);
+    width: 100%;
+    max-width: 100%;
     flex: 1;
   }
   .modal-dialog-header {
diff --git a/src/routes/_components/dialog/components/ReportDialog.html b/src/routes/_components/dialog/components/ReportDialog.html
index 113c205..92fd96c 100644
--- a/src/routes/_components/dialog/components/ReportDialog.html
+++ b/src/routes/_components/dialog/components/ReportDialog.html
@@ -129,7 +129,7 @@
       word-wrap: break-word;
     }
     :global(.report-dialog-contents .confirmation-dialog-form) {
-      max-width: calc(100vw - 20px);
+      max-width: calc(100% - 20px);
     }
   }
 </style>
diff --git a/src/routes/_components/status/MediaAttachments.html b/src/routes/_components/status/MediaAttachments.html
index dc74547..823d553 100644
--- a/src/routes/_components/status/MediaAttachments.html
+++ b/src/routes/_components/status/MediaAttachments.html
@@ -15,7 +15,6 @@
     grid-row-gap: 5px;
 
     overflow: hidden;
-    max-width: calc(100vw - 40px);
     margin: 10px 10px 10px 5px;
   }
 
diff --git a/src/routes/_components/status/Status.html b/src/routes/_components/status/Status.html
index 5d1ae41..03c155d 100644
--- a/src/routes/_components/status/Status.html
+++ b/src/routes/_components/status/Status.html
@@ -47,7 +47,6 @@
 
 <style>
   .status-article {
-    max-width: calc(100vw - 40px);
     padding: 10px 20px;
     display: grid;
     grid-template-areas:
@@ -71,7 +70,6 @@
   }
 
   .status-article.status-in-timeline {
-    width: 560px;
     border-bottom: 1px solid var(--main-border);
   }
 
@@ -104,10 +102,6 @@
   @media (max-width: 767px) {
     .status-article {
       padding: 10px 10px;
-      max-width: calc(100vw - 20px);
-    }
-    .status-article.status-in-timeline {
-      width: 580px;
     }
   }
 </style>
diff --git a/src/routes/_components/status/StatusCard.html b/src/routes/_components/status/StatusCard.html
index 021e81a..c95d348 100644
--- a/src/routes/_components/status/StatusCard.html
+++ b/src/routes/_components/status/StatusCard.html
@@ -27,7 +27,6 @@
     color: inherit;
 
     overflow: hidden;
-    max-width: calc(100vw - 40px);
     margin: 10px 10px 10px 5px;
 
     border: 1px solid var(--settings-list-item-border);
diff --git a/src/routes/_components/status/StatusComposeBox.html b/src/routes/_components/status/StatusComposeBox.html
index 8555793..51dd7ad 100644
--- a/src/routes/_components/status/StatusComposeBox.html
+++ b/src/routes/_components/status/StatusComposeBox.html
@@ -1,6 +1,5 @@
 <div class="status-article-compose-box">
   <ComposeBox realm={originalStatusId}
-              size="slim"
               autoFocus="true"
               hideBottomBorder="true"
               isReply="true"
@@ -12,6 +11,7 @@
 <style>
   .status-article-compose-box {
     grid-area: compose;
+    max-width: 100%;
   }
 </style>
 <script>
diff --git a/src/routes/_components/virtualList/VirtualList.html b/src/routes/_components/virtualList/VirtualList.html
index 843db73..6f91486 100644
--- a/src/routes/_components/virtualList/VirtualList.html
+++ b/src/routes/_components/virtualList/VirtualList.html
@@ -21,6 +21,7 @@
 <style>
   .virtual-list {
     position: relative;
+    width: 100%;
   }
 </style>
 <script>
diff --git a/src/routes/_components/virtualList/VirtualListItem.html b/src/routes/_components/virtualList/VirtualListItem.html
index 3c655b1..663f1dc 100644
--- a/src/routes/_components/virtualList/VirtualListItem.html
+++ b/src/routes/_components/virtualList/VirtualListItem.html
@@ -12,6 +12,7 @@
 <style>
   .virtual-list-item {
     position: absolute;
+    width: 100%;
     top: 0;
     opacity: 0;
     pointer-events: none;
diff --git a/src/scss/global.scss b/src/scss/global.scss
index 2121001..7af0ff9 100644
--- a/src/scss/global.scss
+++ b/src/scss/global.scss
@@ -52,7 +52,9 @@ body {
 main {
   position: relative;
   width: 602px;
-  max-width: 100vw;
+  // take into account scrollbars;
+  // https://stackoverflow.com/a/34884924
+  max-width: 100%;
   padding: 0;
   box-sizing: border-box;
   margin: 30px auto 15px;