Misc css

frontend/src/questions/components/LabelIconPicker.css

@@ -16,6 +16,7 @@
 :local(.sectionList) {
     composes: list;
     composes: border-top from "style";
+    composes: py1 from "style";
 }
 
 :local(.option) {

frontend/src/questions/components/LabelPicker.css

@@ -44,12 +44,19 @@
     visibility: visible;
 }
 
+:local(.name) {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow-x: hidden;
+}
+
 :local(.mainIcon) {
     composes: mr1 from "style";
+    composes: flex-no-shrink from "style";
 }
 
 :local(.removeIcon) {
-    composes: flex-align-right from "style";
+    composes: flex-align-right flex-no-shrink from "style";
     visibility: hidden;
 }
 :local(.option):hover :local(.removeIcon) {

frontend/src/questions/components/LabelPicker.jsx

@@ -35,7 +35,7 @@ const LabelPicker = ({ labels, count, item, setLabeled }) =>
                             :
                                 <LabelIcon className={S.mainIcon} icon={label.icon} />
                             }
-                            {label.name}
+                            <span className={S.name}>{label.name}</span>
                             { selected && <Icon className={S.removeIcon} name="close" /> }
                         </div>
                         <div className={S.optionBackground}></div>