Merge pull request #445 from vyacheslav-pv/update-snippet

[#407] Update the snippet toolbar view

frontend/src/assets/stylesheets/application.scss

@@ -46,6 +46,8 @@ $dropdown-padding-y: 0.25rem;
 
 @import "./max-w";
 
+@import "./min-w";
+
 @import "bootstrap/scss/root";
 @import "bootstrap/scss/reboot";
 

frontend/src/assets/stylesheets/min-w.scss

@@ -0,0 +1,10 @@
+$utilities: map-merge(
+  $utilities,
+  (
+    "min-width": (
+      property: min-width,
+      class: min-w,
+      values: (150: 9.375rem),
+    ),
+  )
+);

frontend/src/pages/snippet/FileToolbar.jsx

@@ -92,7 +92,7 @@ function SnippetName({ snippet }) {
             ref={inputRef}
             as={AutowidthInput}
             autoComplete="off"
-            className="transition-padding w-auto"
+            className="transition-padding"
             id="name"
             isInvalid={!!formik.errors.name}
             maxLength={30}
@@ -104,7 +104,7 @@ function SnippetName({ snippet }) {
             value={formik.values.name}
           />
           <Form.Control.Feedback
-            className={formik.errors.name && 'd-block'}
+            className={formik.errors.name && 'd-block min-w-150'}
             tooltip
             type="invalid"
           >