Merge pull request #2885 from penpot/eva-bugfixing-5

Some bug fixing

CHANGES.md

@@ -5,9 +5,11 @@
 ### :bug: Bugs fixed
 - Fix components groups items show the component name in list mode [Taiga #4770](https://tree.taiga.io/project/penpot/issue/4770)
 - Fix typing CMD+Z on MacOS turns the cursor into a Zoom cursor [Taiga #4778](https://tree.taiga.io/project/penpot/issue/4778)
+- Fix white space on small screens [Taiga #4774](https://tree.taiga.io/project/penpot/issue/4774)
+- Fix button spacing on delete acount modal [Taiga #4762](https://tree.taiga.io/project/penpot/issue/4762)
+- Fix invitations input on team management and onboarding modal [Taiga #4760](https://tree.taiga.io/project/penpot/issue/4760)
 - Fix weird numeration creating new elements in dashboard [Taiga #4755](https://tree.taiga.io/project/penpot/issue/4755)
 
-
 ## 1.17.0
 
 ### :sparkles: New features

frontend/resources/styles/main/partials/dashboard-team.scss

@@ -29,7 +29,35 @@
 
   .custom-input {
     width: 100%;
-    height: 115px;
+    min-height: 116px;
+    max-height: 176px;
+    overflow-y: hidden;
+    input {
+      &.no-padding {
+        padding-top: 12px;
+      }
+      min-height: 40px;
+    }
+    .selected-items {
+      gap: 8px;
+      padding: 8px;
+      max-height: 132px;
+      overflow-y: scroll;
+      .selected-item {
+        .around {
+          height: 24px;
+          display: flex;
+          align-items: center;
+          justify-content: flex-start;
+          width: fit-content;
+          .icon {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          }
+        }
+      }
+    }
   }
 
   .custom-select {

frontend/resources/styles/main/partials/modal.scss

@@ -184,6 +184,7 @@
 
   .modal-footer .action-buttons {
     justify-content: space-around;
+    gap: 15px;
   }
 
   .fields-container {
@@ -1541,8 +1542,52 @@
 
 .onboarding-team-members {
   .team-left {
+    padding: 42px 64px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: auto;
     form {
-      margin-top: 32px;
+      margin-top: 5px;
+      .invite-row {
+        .custom-input {
+          width: 100%;
+          min-height: 80px;
+          height: fit-content;
+          max-height: 176px;
+          overflow-y: hidden;
+          input {
+            &.no-padding {
+              padding-top: 12px;
+            }
+            min-height: 40px;
+          }
+          .selected-items {
+            gap: 7px;
+            padding: 7px;
+            max-height: 132px;
+            overflow-y: scroll;
+            .selected-item {
+              .around {
+                height: 24px;
+                display: flex;
+                align-items: center;
+                justify-content: flex-start;
+                width: fit-content;
+                .icon {
+                  display: flex;
+                  align-items: center;
+                  justify-content: center;
+                }
+              }
+            }
+          }
+        }
+      }
+      .buttons {
+        margin-top: 12px;
+      }
     }
   }
 }

frontend/resources/styles/main/partials/workspace.scss

@@ -17,7 +17,7 @@ $height-palette-max: 80px;
 
 #workspace {
   width: 100vw;
-  height: 100vh;
+  height: 100%;
   user-select: none;
   background-color: $color-canvas;
   display: grid;
@@ -37,6 +37,8 @@ $height-palette-max: 80px;
   .left-toolbar {
     grid-area: toolbar;
     width: $width-left-toolbar;
+    overflow-y: scroll;
+    overflow-x: hidden;
   }
 
   .settings-bar.settings-bar-left {

frontend/src/app/main/ui/components/forms.cljs

@@ -130,7 +130,7 @@
       (cond
         (and touched? (:message error))
         [:span.error {:id (dm/str "error-" input-name)
-                      :data-test (clojure.string/join [data-test "-error"]) }(tr (:message error))]
+                      :data-test (clojure.string/join [data-test "-error"])} (tr (:message error))]
 
         (string? hint)
         [:span.hint hint])]]))
@@ -328,7 +328,13 @@
         remove-item!
         (mf/use-fn
          (fn [item]
-           (swap! items #(into [] (remove (fn [x] (= x item))) %))))]
+           (swap! items #(into [] (remove (fn [x] (= x item))) %))))
+
+        manage-key-down
+        (mf/use-fn
+         (fn [item event]
+           (when (kbd/enter? event)
+             (remove-item! item))))]
 
     (mf/with-effect [result @value]
       (let [val (cond-> @value trim str/trim)
@@ -337,14 +343,6 @@
         (update-form! values)))
 
     [:div {:class klass}
-     (when-let [items (seq @items)]
-       [:div.selected-items
-        (for [item items]
-          [:div.selected-item {:key (:text item)}
-           [:span.around {:class (when-not (:valid item) "invalid")}
-            [:span.text (:text item)]
-            [:span.icon {:on-click #(remove-item! item)} i/cross]]])])
-
      [:input {:id (name input-name)
               :class in-klass
               :type "text"
@@ -355,4 +353,14 @@
               :value @value
               :on-change on-change
               :placeholder (when empty? label)}]
-     [:label {:for (name input-name)} label]]))
+     [:label {:for (name input-name)} label]
+
+     (when-let [items (seq @items)]
+       [:div.selected-items
+        (for [item items]
+          [:div.selected-item {:key (:text item)
+                               :tab-index "0"
+                               :on-key-down (partial manage-key-down item)}
+           [:span.around {:class (when-not (:valid item) "invalid")}
+            [:span.text (:text item)]
+            [:span.icon {:on-click #(remove-item! item)} i/cross]]])])]))