margin and padding style adjustments (#4264)

apps/browser/src/popup/scss/base.scss

@@ -327,7 +327,7 @@ header {
 }
 
 .content {
-  padding: 15px;
+  padding: 15px 5px;
 }
 
 .tabs {

apps/browser/src/popup/scss/box.scss

@@ -19,11 +19,11 @@
   }
 
   .box-header-expandable {
-    padding: 10px;
-    margin: 0 10px;
+    padding: 10px 5px;
+    margin: 0 5px;
     text-transform: uppercase;
     display: flex;
-    width: calc(100% - 20px);
+    width: calc(100% - 10px);
     box-sizing: border-box;
     align-items: center;
     border-radius: $border-radius;
@@ -76,11 +76,18 @@
         }
       }
     }
+
+    &.single-line .box-content-row,
+    .box-content-row.single-line {
+      padding-top: 10px;
+      padding-bottom: 10px;
+      margin: 5px;
+    }
   }
 
   .box-footer {
-    margin: 0 10px 10px 10px;
-    padding: 0 15px 10px 15px;
+    margin: 0 5px 5px 5px;
+    padding: 0 10px 5px 10px;
     font-size: $font-size-small;
 
     button.btn {
@@ -109,10 +116,10 @@
     margin: 10px 0 20px 0;
     .box-content {
       .box-content-row {
-        padding: 10px;
+        padding: 5px 10px;
         text-decoration: none;
         border-radius: $border-radius;
-        margin: 10px;
+        margin: 5px;
         // background-color: $background-color;
 
         @include themify($themes) {
@@ -180,7 +187,7 @@
           display: flex;
           padding-top: 10px;
           padding-bottom: 10px;
-          margin: 10px;
+          margin: 5px;
           border-radius: $border-radius;
         }
       }
@@ -219,11 +226,11 @@
 
 .box-content-row {
   display: block;
-  padding: 10px 15px;
+  padding: 5px 10px;
   position: relative;
   z-index: 1;
   border-radius: $border-radius;
-  margin: 10px;
+  margin: 8px 5px;
 
   @include themify($themes) {
     background-color: themed("boxBackgroundColor");
@@ -353,8 +360,6 @@
   }
 
   &.box-content-row-multi {
-    width: calc(100% - 20px);
-
     input:not([type="checkbox"]) {
       width: 100%;
     }
@@ -388,6 +393,10 @@
   &.box-content-row-checkbox,
   &.box-content-row-input,
   &.box-content-row-slider {
+    padding-top: 10px;
+    padding-bottom: 10px;
+    margin: 5px;
+
     label,
     .row-label {
       font-size: $font-size-base;

apps/browser/src/popup/scss/buttons.scss

@@ -65,7 +65,7 @@
 
   &.block {
     display: block;
-    width: calc(100% - 20px);
+    width: calc(100% - 10px);
     margin: 0 auto;
   }
 
@@ -90,7 +90,7 @@
 
 button.box-content-row {
   display: block;
-  width: calc(100% - 20px);
+  width: calc(100% - 10px);
   text-align: left;
   border-color: none;
 

apps/browser/src/popup/scss/pages.scss

@@ -11,8 +11,8 @@ app-sync {
 app-generator .generated-block {
   font-size: $font-size-large;
   font-family: $font-family-monospace;
-  margin: 10px;
-  padding: 10px 10px 10px 0;
+  margin: 8px;
+  padding: 8px 10px 8px 0;
   display: flex;
   border-radius: $border-radius;
   border: 1px solid;
@@ -165,7 +165,8 @@ app-options {
 
 app-vault-view,
 app-vault-add-edit,
-app-generator {
+app-generator,
+app-vault-attachments {
   .box {
     margin: 15px 0 25px 0;
 

apps/browser/src/popup/settings/excluded-domains.component.html

@@ -74,7 +74,7 @@
           type="button"
           appStopClick
           (click)="addUri()"
-          class="box-content-row box-content-row-newmulti"
+          class="box-content-row box-content-row-newmulti single-line"
         >
           <i class="bwi bwi-plus-circle bwi-fw bwi-lg" aria-hidden="true"></i> {{ "newUri" | i18n }}
         </button>

apps/browser/src/popup/vault/add-edit.component.html

@@ -549,7 +549,7 @@
           type="button"
           appStopClick
           (click)="addUri()"
-          class="box-content-row box-content-row-newmulti"
+          class="box-content-row box-content-row-newmulti single-line"
           *ngIf="!(!cipher.edit && editMode)"
         >
           <i class="bwi bwi-plus-circle bwi-fw bwi-lg" aria-hidden="true"></i> {{ "newUri" | i18n }}
@@ -607,7 +607,7 @@
         </div>
         <button
           type="button"
-          class="box-content-row box-content-row-flex text-default"
+          class="box-content-row box-content-row-flex text-default single-line"
           appStopClick
           (click)="attachments()"
           *ngIf="editMode && showAttachments && !cloneMode"

apps/browser/src/popup/vault/attachments.component.html

@@ -21,7 +21,7 @@
   </header>
   <main tabindex="-1">
     <div class="box" *ngIf="cipher && cipher.hasAttachments">
-      <div class="box-content no-hover">
+      <div class="box-content no-hover single-line">
         <div class="box-content-row box-content-row-flex" *ngFor="let a of cipher.attachments">
           <div class="row-main">
             {{ a.fileName }}

apps/browser/src/popup/vault/view.component.html

@@ -525,7 +525,7 @@
     <h2 class="box-header">
       {{ "attachments" | i18n }}
     </h2>
-    <div class="box-content">
+    <div class="box-content single-line">
       <button
         type="button"
         class="box-content-row box-content-row-flex text-default"