3 files changed, 50 insertions, 83 deletions
diff --git a/web_src/css/features/colorpicker.css b/web_src/css/features/colorpicker.css
index b7436783df..4c517e6348 100644
--- a/web_src/css/features/colorpicker.css
+++ b/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;
diff --git a/web_src/css/features/gitgraph.css b/web_src/css/features/gitgraph.css
index 865c82e003..8bdafc3c99 100644
--- a/web_src/css/features/gitgraph.css
+++ b/web_src/css/features/gitgraph.css
@@ -10,14 +10,6 @@
   align-items: center;
 }
 
-#git-graph-container .color-buttons {
-  margin-right: 0;
-}
-
-#git-graph-container .ui.header.dividing {
-  padding-bottom: 10px;
-}
-
 #git-graph-container #flow-select-refs-dropdown {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
@@ -31,25 +23,6 @@
   align-items: center;
 }
 
-#git-graph-container #flow-select-refs-dropdown .ui.label .truncate {
-  display: inline-block;
-  max-width: 140px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  vertical-align: top;
-  white-space: nowrap;
-}
-
-#git-graph-container #flow-select-refs-dropdown .default.text {
-  padding-top: 4px;
-  padding-bottom: 4px;
-}
-
-#git-graph-container #flow-select-refs-dropdown input.search {
-  position: relative;
-  top: 1px;
-}
-
 #git-graph-container li {
   list-style-type: none;
   height: 24px;
@@ -57,16 +30,20 @@
   white-space: nowrap;
   display: flex;
   align-items: center;
-  gap: 0.25em;
+  gap: 0.5em;
 }
 
-#git-graph-container li .ui.label.commit-id-short {
-  padding-top: 2px;
-  padding-bottom: 2px;
+#git-graph-container li > span {
+  flex-shrink: 0;
 }
 
-#git-graph-container li .node-relation {
-  font-family: var(--fonts-monospace);
+#git-graph-container li > span.message {
+  flex-shrink: 1;
+}
+
+#git-graph-container li .ui.label.commit-id-short {
+  padding: 2px 4px;
+  height: 20px;
 }
 
 #git-graph-container li .author {
@@ -78,17 +55,6 @@
   font-size: 80%;
 }
 
-#git-graph-container li a:not(.ui):hover {
-  text-decoration: underline;
-}
-
-#git-graph-container li a em {
-  color: var(--color-red);
-  border-bottom: 1px dotted var(--color-secondary);
-  text-decoration: none;
-  font-style: normal;
-}
-
 #git-graph-container #rel-container {
   max-width: 30%;
   overflow-x: auto;
@@ -105,34 +71,23 @@
   width: 100%;
 }
 
-#git-graph-container #rev-list li.highlight.hover {
-  background-color: var(--color-secondary-alpha-30);
-}
-
-#git-graph-container #rev-list .commit-refs .button {
+#git-graph-container li .commit-refs .ui.button,
+#git-graph-container li .commit-refs .ui.label.tag-label {
   padding: 2px 4px;
   margin-right: 0.25em;
   display: inline-block;
   max-width: 200px;
   overflow: hidden;
   text-overflow: ellipsis;
+  line-height: var(--line-height-default);
   min-height: 0;
 }
 
-#git-graph-container #graph-raw-list {
-  margin: 0;
-}
-
 #git-graph-container.monochrome #rel-container .flow-group {
   stroke: var(--color-secondary-dark-5);
   fill: var(--color-secondary-dark-5);
 }
 
-#git-graph-container.monochrome #rel-container .flow-group.highlight {
-  stroke: var(--color-secondary-dark-12);
-  fill: var(--color-secondary-dark-12);
-}
-
 #git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-1 {
   stroke: #499a37;
   fill: #499a37;
diff --git a/web_src/css/features/projects.css b/web_src/css/features/projects.css
index 80c9d89638..25cb530f85 100644
--- a/web_src/css/features/projects.css
+++ b/web_src/css/features/projects.css
@@ -5,12 +5,13 @@
   flex-wrap: nowrap;
   overflow: auto;
   margin: 0 0.5em;
+  min-height: max(calc(100vh - 400px), 300px);
   max-height: calc(100vh - 120px);
 }
 
 .project-header {
   padding: 0.5em 0;
-  overflow-x: auto; /* in fullscreen mode, the position is fixed, so we can't use "flex wrap" which would change the height */
+  flex-wrap: wrap;
 }
 
 .project-header h2 {
@@ -70,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;
@@ -84,6 +85,7 @@
   scroll-snap-align: center;
   margin-right: 2px;
   aspect-ratio: 1;
+  object-fit: contain;
 }
 
 .card-attachment-images img:only-child {
@@ -101,17 +103,11 @@
   opacity: 0;
 }
 
-.fullscreen.projects-view .project-header {
-  position: fixed;
-  z-index: 1000;
-  top: 0;
-  left: 0;
-  right: 0;
-  padding: 0.5em;
-  width: 100%;
-  max-width: 100%;
-  background-color: var(--color-body);
-  border-bottom: 1px solid var(--color-secondary);
+.fullscreen.projects-view {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
 }
 
 /* Hide project-description in full-screen due to its variable height. No need to show it for better space use. */
@@ -120,9 +116,7 @@
 }
 
 .fullscreen.projects-view #project-board {
-  position: absolute;
-  top: 60px;
-  left: 0;
-  right: 0;
-  max-height: calc(100vh - 70px);
+  flex: 1;
+  max-height: unset;
+  padding-bottom: 0.5em;
 }