Spacing adjustments (#2231)

* adjustments to some spacing to make more room for UI as a response to some tabs feedback, adjust minor wording in toast message

* simplify some sizing and use the youtube min max list size for large media card

src/app/components/article/ClaimFactCheckForm.js

@@ -176,7 +176,7 @@ const ClaimFactCheckForm = ({
     setError(false);
     onClose(false);
     setFlashMessage(<FormattedMessage
-      defaultMessage="Article created successfully! This new article may take a while to appear up everywhere."
+      defaultMessage="Article created successfully! This new article may take a while to appear everywhere."
       description="Save item action success message"
       id="claimFactCheckForm.saveSuccess"
     />, 'success');

src/app/components/article/ExplainerForm.js

@@ -76,7 +76,7 @@ const ExplainerForm = ({
     setError(false);
     onClose(false);
     setFlashMessage(<FormattedMessage
-      defaultMessage="Article created successfully! This new article may take a while to appear up everywhere."
+      defaultMessage="Article created successfully! This new article may take a while to appear everywhere."
       description="Save item action success message"
       id="explainerForm.saveSuccess"
     />, 'success');

src/app/components/dashboard/Dashboard.module.css

@@ -9,7 +9,7 @@
     flex-direction: column;
     gap: 16px;
     overflow: auto;
-    padding: 16px 32px 32px;
+    padding: 16px 16px 32px;
 
     hr {
       border-bottom: solid 1px var(--color-beige-76);

src/app/components/drawer/Projects/Projects.module.css

@@ -19,7 +19,7 @@
 }
 
 .listMainAction {
-  padding: 0 18px;
+  padding: 0 16px;
 }
 
 .listWrapper {

src/app/components/feed/FeedItem.module.css

@@ -37,7 +37,7 @@
 .feedItemColumns {
   display: flex;
   gap: 16px;
-  margin: 16px 32px;
+  margin: 16px;
 }
 
 .feedItemColumn {

src/app/components/media/MediaCardLarge.module.css

@@ -9,8 +9,9 @@
   > .video-media-card,
   > .webpage-media-card {
     flex: 1 1;
+    max-width: 500px;
     min-height: 200px;
-    min-width: calc(200px * (16/9));
+    min-width: 240px;
   }
 
   .pender-card-wrapper {
@@ -99,7 +100,7 @@
 
   .media-card-large-meta {
     flex: 1 1;
-    min-width: 350px;
+    min-width: 240px;
 
     .media-card-large-title {
       @mixin typography-subtitle2;

src/app/components/media/ReportDesigner/ReportDesigner.module.css

@@ -13,7 +13,7 @@
     flex-wrap: wrap;
     gap: 16px;
     justify-content: space-between;
-    margin: 16px 32px 0;
+    margin: 16px 16px 0;
     padding: 16px;
     width: auto;
 
@@ -35,7 +35,7 @@
     flex: 1 1 auto;
     flex-direction: row;
     height: 400px;
-    margin: 0 32px;
+    margin: 0 16px;
     max-height: 100%;
     overflow: hidden;
 
@@ -55,6 +55,8 @@
     }
 
     .report-editor {
+      padding: 0 16px 16px 0;
+
       .report-designer-form {
         background-color: var(--color-white-100);
         border-radius: var(--border-radius-default);

src/app/components/media/media.module.css

@@ -1,5 +1,4 @@
 .media-item-wrapper {
-  --minMediaColumnWidth: calc(216px * (16/9));
   display: flex;
   flex-direction: column;
   gap: 16px;
@@ -10,7 +9,7 @@
     display: flex;
     gap: 8px;
     justify-content: flex-start;
-    margin: 2px 32px -28px;
+    margin: 2px 16px -28px;
   }
 
   .media-actions-bar {
@@ -21,8 +20,7 @@
     flex: 0 0 64px;
     flex-wrap: wrap;
     justify-content: space-between;
-    margin: 16px 32px 0;
-    min-width: var(--minMediaColumnWidth);
+    margin: 16px 16px 0;
     padding: 16px;
     width: auto;
 
@@ -102,7 +100,7 @@
     flex: 1 1 100%;
     flex-flow: row wrap;
     gap: 16px;
-    margin: 0 32px 16px;
+    margin: 0 16px 16px;
     min-height: 0;
     overflow: hidden;
 
@@ -126,7 +124,6 @@
     .media-item-medias {
       flex: 2 1 0;
       height: 100%;
-      min-width: var(--minMediaColumnWidth);
 
       .media-item-content {
         background-color: var(--color-white-100);
@@ -153,7 +150,7 @@
     .media-item-annotations {
       flex: 1 1 0;
       height: 100%;
-      min-width: var(--minMediaColumnWidth);
+      min-width: 500px;
 
       .media-annotations-tabs {
         background-color: var(--color-white-100);
@@ -237,23 +234,26 @@
     }
   }
 
-  @media (max-width: 1200px) {
+  @media (max-width: 1280px) {
     height: 100vh;
     overflow: auto;
 
     .media-item {
+      flex-flow: column nowrap;
       margin: 0;
       overflow: auto;
-      padding: 0 16px 16px 32px;
+      padding: 0 16px 16px;
 
       .media-item-content {
         overflow: visible;
       }
 
       .media-item-medias,
       .media-item-annotations {
+        flex: 1 0 auto;
         height: auto;
         max-height: unset;
+        min-width: unset;
       }
 
       .media-item-annotations {

src/app/components/search/SearchResults.module.css

@@ -76,7 +76,7 @@
 }
 
 .search-results-header {
-  margin: 16px 32px;
+  margin: 16px;
 
   :global(.search__list-header-filter-row) {
     align-items: flex-start;
@@ -95,7 +95,7 @@
 .search-results-top {
   background-color: var(--color-white-100);
   border-radius: var(--border-radius-default);
-  margin: 0 32px 16px;
+  margin: 0 16px 16px;
   padding: 16px;
 
   .search-results-top-extra {
@@ -109,7 +109,7 @@
   border-radius: var(--border-radius-default);
   display: flex;
   flex-direction: column;
-  margin: 0 32px 16px;
+  margin: 0 16px 16px;
   max-height: 100%;
   overflow: hidden;
 

src/app/components/team/Settings.module.css

@@ -8,7 +8,7 @@
     flex: 1 1 auto;
     flex-direction: column;
     overflow: auto;
-    padding: 16px 32px 32px;
+    padding: 16px 16px 32px;
 
     .setting-details-wrapper {
       max-width: var(--columnWidthLarge);

src/app/components/user/user.module.css

@@ -9,7 +9,7 @@
     flex: 1 1 auto;
     flex-direction: column;
     overflow: auto;
-    padding: 16px 32px 32px;
+    padding: 16px 16px 32px;
 
     .appstore-badges {
       display: flex;