Improve project & label color picker and image scroll (#34971)

Fix #34609
Fix #34967

web_src/css/base.css

@@ -1031,19 +1031,6 @@ table th[data-sortt-desc] .svg {
   min-height: 0;
 }
 
-.precolors {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  margin-left: 1em;
-}
-
-.precolors .color {
-  display: inline-block;
-  width: 15px;
-  height: 15px;
-}
-
 .ui.dropdown:not(.button) {
   line-height: var(--line-height-default); /* the dropdown doesn't have default line-height, use this to make the dropdown icon align with plain dropdown */
 }

web_src/css/features/colorpicker.css

@@ -1,15 +1,13 @@
-.js-color-picker-input {
+.color-picker-combo {
   display: flex;
-  position: relative;
+  position: relative; /* to position the preview square */
 }
 
-.js-color-picker-input input {
-  padding-top: 8px !important;
-  padding-bottom: 8px !important;
+.color-picker-combo input {
   padding-left: 32px !important;
 }
 
-.js-color-picker-input .preview-square {
+.color-picker-combo .preview-square {
   position: absolute;
   aspect-ratio: 1;
   height: 16px;
@@ -22,7 +20,7 @@
   background-size: 8px 8px;
 }
 
-.js-color-picker-input .preview-square::after {
+.color-picker-combo .preview-square::after {
   content: "";
   position: absolute;
   width: 100%;
@@ -31,6 +29,26 @@
   background-color: currentcolor;
 }
 
+.color-picker-combo .precolors {
+  display: flex;
+  margin-left: 1em;
+  align-items: center;
+  gap: 0.125em;
+}
+
+.color-picker-combo .precolors .generate-random-color {
+  padding: 0;
+  width: 30px;
+  height: 30px;
+  min-height: 0;
+}
+
+.color-picker-combo .precolors .color {
+  display: inline-block;
+  width: 15px;
+  height: 15px;
+}
+
 hex-color-picker {
   width: 180px;
   height: 120px;

web_src/css/features/projects.css

@@ -71,7 +71,7 @@
 .card-attachment-images {
   display: inline-block;
   white-space: nowrap;
-  overflow: scroll;
+  overflow: auto;
   cursor: default;
   scroll-snap-type: x mandatory;
   text-align: center;
@@ -85,6 +85,7 @@
   scroll-snap-align: center;
   margin-right: 2px;
   aspect-ratio: 1;
+  object-fit: contain;
 }
 
 .card-attachment-images img:only-child {