Truncate long job titles to 50 chars on new invoic epage

ui/resources/public/less/component/select-input.less

@@ -16,7 +16,7 @@
     justify-content: space-between;
     height: @input-height;
     cursor: pointer;
-    white-space: nowrap; 
+    white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     padding-left: 0.5em;
@@ -40,7 +40,7 @@
       width: 32px;
       height: 32px;
       flex-basis: 32px;
-      flex-shrink: 0; 
+      flex-shrink: 0;
     }
 
     &:hover {
@@ -97,6 +97,7 @@
         height: @input-height;
         padding-left: 1em;
         cursor: pointer;
+        text-align: left;
 
         &:hover {
 	  background-color: #d6e1fd;
@@ -146,7 +147,7 @@
           background-color: desaturate(#color[light-purple], 5%);
         }
       }
-      
+
       > .selection-listing {
         > .selection {
           background-color: #color[light-purple];

ui/src/ethlance/ui/page/new_invoice.cljs

@@ -10,6 +10,19 @@
     [re-frame.core :as re]))
 
 
+(defn truncate [length ending string]
+  (cond
+    (nil? string)
+    ""
+
+    (< (count string) (+ length 3))
+    string
+
+    :else
+    (str
+      (subs string 0 (min (count string) length))
+      ending)))
+
 (defmethod page :route.invoice/new []
   (let [active-user (:user/id @(re/subscribe [:ethlance.ui.subscriptions/active-session]))
         query [:candidate {:user/id active-user}
@@ -66,7 +79,9 @@
            [c-select-input
             {:selections *job-listing
              :value-fn (fn [job-story] (str (:job/id job-story) "-" (:job-story/id job-story)))
-             :label-fn (comp :job/title :job)
+             :label-fn (comp #(truncate 50 "..." %)
+                             :job/title
+                             :job)
              :selection @*invoiced-job
              :on-select #(re/dispatch [:page.new-invoice/set-invoiced-job %])}]]
           [:div.input-stripe {:on-click (partial focus-on-element "invoice-hours-input")}