Merge pull request #2326 from overleaf/cmg-publish-modal-buttons

Stop publish modal buttons wrapping incorrectly at zoomed out levels

GitOrigin-RevId: 3298cf7734a2a033423c2f6f866f6db43cdc83fb

services/web/public/stylesheets/app/editor/publish-modal.less

@@ -1,132 +1,134 @@
 .modal-body-publish {
-    @label-column-width: 10em;
-    @control-left-margin: 1.0em;
-    .form-control-box {
-      margin-bottom: 1.5ex;
-      margin-left: @control-left-margin;
-      label {
-        display: inline-block;
-        width: @label-column-width;
-        vertical-align: baseline;
-      }
-      label.checkbox-label {
-        width: auto;
-      }
-      .form-control {
-        display: inline-block;
-        width: 60%;
-      }
-      input[type="checkbox"] {
-        margin-right: 0.5em;
-      }
-      textarea {
-        vertical-align: baseline;
-      }
-      select {
-        padding-top: 1ex;
-        padding-bottom: 1ex;
-        padding-left: 1em;
-        padding-right: 1em;
-      }
-      option {
-        margin-left: -4px;
-      }
-      a.help {
-        margin-left: 0.6em;
-      }
+  @label-column-width: 10em;
+  @control-left-margin: 1em;
+  .form-control-box {
+    margin-bottom: 1.5ex;
+    margin-left: @control-left-margin;
+    label {
+      display: inline-block;
+      width: @label-column-width;
+      vertical-align: baseline;
+    }
+    label.checkbox-label {
+      width: auto;
     }
-    .no-label {
-      margin-left: @label-column-width + @control-left-margin;
+    .form-control {
+      display: inline-block;
+      width: 60%;
     }
-		#search-input-container {
-				overflow: hidden;
-				margin: 5px 0 10px;
-		}
-		.table-content-name {
-				width: 100%;
-				margin-bottom: 10px;
-				font-weight: 300;
-		}
-		.table-content-category {
-				font-weight: 300;
-				text-align: right;
-				font-style: italic;
-				width: 30%;
-				float: right;
-				text-transform: capitalize
-		}
-		.table-content-category ~ .table-content-name {
-				width: 70%;
-				display: inline-block;
-		}
-		.wl-icon:before{
-				font-size: 14px;
-		}
-		.btn-wrapping{
-				white-space: normal;
-		}
-		.button-as-link{
-         color: green;
-         text-transform: none;
-         background: none;
-         padding: 0;
-         border: none;
-         border-radius: 0;
-         font-size: 14px;
-         @extend a;
-         &:hover,
-         &:active,
-         &:focus {
-             color: green;
-             background: none;
-         }
-	       text-align: left;
-		}
-    .affix-content-title {
-      color: @gray-light;
-      font-size: 1.2em;
-      padding-left: 10px;
+    input[type='checkbox'] {
+      margin-right: 0.5em;
     }
+    textarea {
+      vertical-align: baseline;
+    }
+    select {
+      padding-top: 1ex;
+      padding-bottom: 1ex;
+      padding-left: 1em;
+      padding-right: 1em;
+    }
+    option {
+      margin-left: -4px;
+    }
+    a.help {
+      margin-left: 0.6em;
+    }
+  }
+  .no-label {
+    margin-left: @label-column-width + @control-left-margin;
+  }
+  #search-input-container {
+    overflow: hidden;
+    margin: 5px 0 10px;
+  }
+  .table-content-name {
+    width: 100%;
+    margin-bottom: 10px;
+    font-weight: 300;
+  }
+  .table-content-category {
+    font-weight: 300;
+    text-align: right;
+    font-style: italic;
+    width: 30%;
+    float: right;
+    text-transform: capitalize;
+  }
+  .table-content-category ~ .table-content-name {
+    width: 70%;
+    display: inline-block;
+  }
+  .wl-icon:before {
+    font-size: 14px;
+  }
+  .btn-wrapping {
+    min-width: 8em;
+    max-width: 25em;
+    white-space: normal;
+  }
+  .button-as-link {
+    color: green;
+    text-transform: none;
+    background: none;
+    padding: 0;
+    border: none;
+    border-radius: 0;
+    font-size: 14px;
+    @extend a;
+    &:hover,
+    &:active,
+    &:focus {
+      color: green;
+      background: none;
+    }
+    text-align: left;
+  }
+  .affix-content-title {
+    color: @gray-light;
+    font-size: 1.2em;
+    padding-left: 10px;
+  }
 
-    .affix-subcontent {
-      margin: 5px 0 50px;
+  .affix-subcontent {
+    margin: 5px 0 50px;
+  }
+  .overbox {
+    padding: @line-height-computed / 2;
+    background-color: white;
+    margin-top: @line-height-computed / 2;
+    border: 1px solid @gray-lighter;
+    border-radius: 9px;
+  }
+  .content-as-table {
+    .table-content,
+    .table-content > * {
+      display: table;
+    }
+    .table-content-icon {
+      float: left;
+      height: 100px;
+      width: 106px;
+      display: flex;
+      align-items: flex-start;
+      overflow: hidden;
+      * {
+        border: 1px solid @gray-lightest;
+        width: 100%;
+      }
+    }
+    .table-content-text {
+      float: right;
+      width: calc(~'100% - 106px');
+      vertical-align: top;
+      padding-left: 15px;
     }
-    .overbox {
-        padding: @line-height-computed / 2;
-	      background-color: white;
-	      margin-top: @line-height-computed / 2;
-        border: 1px solid @gray-lighter;
-        border-radius: 9px;
+    .table-content-slogan {
+      height: 100px;
+      overflow: hidden;
     }
-    .content-as-table {
-	      .table-content,
-	      .table-content > * {
-		        display: table;
-	      }
-	      .table-content-icon {
-		        float: left;
-		        height: 100px;
-		        width: 106px;
-		        display: flex;
-		        align-items: flex-start;
-		        overflow: hidden;
-		        * {
-			          border: 1px solid @gray-lightest;
-			          width: 100%;
-		        }
-	      }
-	      .table-content-text {
-		        float: right;
-		        width: calc(~'100% - 106px');
-		        vertical-align: top;
-		        padding-left: 15px;
-	      }
-	      .table-content-slogan {
-		        height: 100px;
-		        overflow: hidden;
-	      }
-	      .table-content-link {
-		        padding-top: 10px;
-	      }
+    .table-content-link {
+      padding-top: 10px;
     }
+  }
 }