From ef32a72b4b31eb1abd7e16e378c93cef80f952e6 Mon Sep 17 00:00:00 2001
From: Aymen Hassini <hassiniaymen@yahoo.com>
Date: Wed, 4 Feb 2026 15:25:50 +0100
Subject: [PATCH] improve cardDetails.css

---
 client/components/cards/cardDetails.css | 96 +++++++++++++++----------
 1 file changed, 60 insertions(+), 36 deletions(-)

diff --git a/client/components/cards/cardDetails.css b/client/components/cards/cardDetails.css
index 734da03fa..42821d284 100644
--- a/client/components/cards/cardDetails.css
+++ b/client/components/cards/cardDetails.css
@@ -1,23 +1,25 @@
 /* Date Format Selector */
 .card-details-item-date-format {
-  margin-bottom: 10px;
+  margin-bottom: 12px;
 }
 
 .card-details-item-date-format .card-details-item-title {
-  font-size: 14px;
+  font-size: 15px;
   font-weight: bold;
-  margin-bottom: 5px;
+  margin-bottom: 6px;
   color: #333;
+  letter-spacing: 0.03em;
 }
 
 .card-details-item-date-format .js-date-format-selector {
   width: 100%;
-  padding: 8px;
+  padding: 9px 10px;
   border: 1px solid #ddd;
-  border-radius: 4px;
+  border-radius: 5px;
   background-color: #fff;
-  font-size: 14px;
+  font-size: 15px;
   cursor: pointer;
+  transition: border-color 0.15s, box-shadow 0.15s;
 }
 
 .card-details-item-date-format .js-date-format-selector:focus {
@@ -27,18 +29,18 @@
 }
 
 .assignee {
-  border-radius: 3px;
   display: block;
   position: relative;
   float: left;
   height: clamp(24px, 3.5vw, 36px);
   width: clamp(24px, 3.5vw, 36px);
-  margin: .3vh;
+  margin: 0.3vh;
   cursor: pointer;
   user-select: none;
   z-index: 1;
   text-decoration: none;
   border-radius: 50%;
+  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.04);
 }
 .assignee .avatar {
   overflow: hidden;
@@ -51,12 +53,18 @@
   background-color: #dbdbdb;
   color: #444;
   position: absolute;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
 }
 .assignee .avatar.avatar-image {
   object-fit: cover;
   object-position: center;
   height: 100%;
   width: 100%;
+  display: block;
 }
 .assignee .assignee-presence-status {
   background-color: #b3b3b3;
@@ -67,7 +75,6 @@
   position: absolute;
   right: -1px;
   bottom: -1px;
-  border: 1px solid #fff;
   z-index: 15;
 }
 .assignee .assignee-presence-status.active {
@@ -91,6 +98,7 @@
   align-items: center;
   justify-content: center;
   box-shadow: 0 0 0 2px #bfbfbf inset;
+  transition: box-shadow 0.12s;
 }
 .assignee.add-assignee:hover,
 .assignee.add-assignee.is-active {
@@ -102,20 +110,22 @@
   background-color: rgba(0,0,0,0.875);
   color: #fff;
   border-radius: 0.7vw;
+  font-size: 0.98em;
 }
+
 .card-details {
   padding: 0;
   flex-shrink: 0;
   flex-basis: min(600px, 80vw);
   will-change: flex-basis;
-  overflow-y: scroll;
+  overflow-y: auto;
   overflow-x: hidden;
   background: #f7f7f7;
-  border-radius: bottom 0.4vw;
+  border-radius: 0 0 0.4vw 0.4vw;
   z-index: 30;
   animation: flexGrowIn 0.1s;
   box-shadow: 0 0 0.9vh 0 #b3b3b3;
-  transition: flex-basis 0.1s;
+  transition: flex-basis 0.1s, box-shadow 0.15s;
   box-sizing: border-box;
 }
 
@@ -167,7 +177,7 @@ body.desktop-mode .card-details:not(.card-details-popup):not(.card-details-colla
 
 /* Collapsed card state - hide content and set height to title row only */
 .card-details.card-details-collapsed .card-details-canvas > *:not(.card-details-header) {
-  display: none;
+  display: none !important;
 }
 .card-details.card-details-collapsed {
   height: auto !important;
@@ -186,19 +196,19 @@ body.desktop-mode .card-details.card-details-collapsed {
 }
 .card-details .card-details-header {
   margin: 0 -20px 5px;
-  padding: 7px 20px;
+  padding: 8px 20px;
   background: #ededed;
   border-bottom: 1px solid #dbdbdb;
   position: sticky;
   top: 0px;
   z-index: 500;
   display: flow-root;
-  min-height: 40px;
+  min-height: 44px;
 }
 .card-details .card-details-header .card-number {
   color: #b3b3b3;
   display: inline-block;
-  margin-right: 5px;
+  margin-right: 6px;
 }
 
 /* Collapse toggle triangle */
@@ -215,7 +225,6 @@ body.desktop-mode .card-details.card-details-collapsed {
   line-height: 1.2;
 }
 
-/* Drag handle */
 .card-details .card-details-header .card-drag-handle {
   font-size: 20px;
   padding: 8px 10px;
@@ -249,6 +258,7 @@ body.desktop-mode .card-details.card-details-collapsed {
   user-select: none;
   vertical-align: middle;
   line-height: 1.2;
+  transition: color 0.13s;
 }
 .card-details .card-details-header .close-card-details-mobile-web,
 .card-details .card-details-header .card-mobile-desktop-toggle {
@@ -307,7 +317,7 @@ body.desktop-mode .card-details.card-details-collapsed {
 .card-details .card-label,
 .card-details .viewer {
   font-size: inherit;
-  line-height: 1.4;
+  line-height: 1.5;
 }
 .card-details .card-details-header .card-details-watch {
   font-size: 17px;
@@ -316,12 +326,13 @@ body.desktop-mode .card-details.card-details-collapsed {
 }
 .card-details .card-details-header .card-details-title {
   font-weight: bold;
-  font-size: 1.33em;
+  font-size: 1.35em;
   margin: 7px 0 0;
   padding: 0;
   display: inline-block;
   vertical-align: middle;
   line-height: 1.3;
+  letter-spacing: 0.01em;
 }
 .card-details .card-details-header .linked-card-location {
   font-style: italic;
@@ -336,10 +347,10 @@ body.desktop-mode .card-details.card-details-collapsed {
   margin-bottom: 10px;
 }
 .card-details .card-details-header form.inlined-form .copied-tooltip {
-  padding: 0px 10px;
+  padding: 0 10px;
 }
 .card-details .card-details-header .card-details-list {
-  font-size: 0.85em;
+  font-size: 0.9em;
   margin-bottom: 3px;
 }
 .card-details .card-details-header .card-details-list a.card-details-list-title {
@@ -349,7 +360,7 @@ body.desktop-mode .card-details.card-details-collapsed {
   display: inline-block;
   background: #e6e6e6;
   border-radius: 3px;
-  padding: 0px 5px;
+  padding: 0 5px;
 }
 .card-details .card-details-header .copied-tooltip {
   margin-right: 10px;
@@ -360,11 +371,13 @@ body.desktop-mode .card-details.card-details-collapsed {
 }
 .card-details .card-description textarea {
   min-height: 100px;
+  resize: vertical;
 }
 .card-details .card-details-items {
   display: flex;
   flex-wrap: wrap;
   margin: 15px 0;
+  gap: 0.5em;
 }
 .card-details .card-details-items .card-details-item {
   margin-right: 0.5em;
@@ -433,10 +446,10 @@ body.desktop-mode .card-details.card-details-collapsed {
     flex-shrink: 0;
     flex-basis: calc(100% - 20px);
     will-change: flex-basis;
-    overflow-y: scroll;
-    overflow-x: scroll;
+    overflow-y: auto;
+    overflow-x: auto;
     background: #f7f7f7;
-    border-radius: bottom 3px;
+    border-radius: 0 0 3px 3px;
     z-index: 100;
     animation: flexGrowIn 0.1s;
     box-shadow: 0 0 7px 0 #b3b3b3;
@@ -480,12 +493,11 @@ input[type="submit"].attachment-add-link-submit {
 @media screen and (max-width: 800px) {
   .card-details {
     width: 100% !important;
-    padding: 0px 0px 0px 0px !important;
-    margin: 0px !important;
+    padding: 0 !important;
+    margin: 0 !important;
     transition: none;
     overflow-y: auto;
     overflow-x: hidden;
-    /* iOS Safari specific fixes */
     -webkit-overflow-scrolling: touch;
     position: fixed !important;
     top: 0 !important;
@@ -715,13 +727,15 @@ body.mobile-mode .card-details .card-details-header .close-card-details-mobile-w
 .vote-title {
   display: flex;
   justify-content: space-between;
+  align-items: center;
 }
 .vote-title .js-edit-date {
-  align-self: baseline;
-  margin-left: 5px;
+  align-self: flex-start;
+  margin-left: 6px;
 }
 .vote-result {
   display: flex;
+  gap: 6px;
 }
 .js-show-positive-votes {
   cursor: pointer;
@@ -732,29 +746,33 @@ body.mobile-mode .card-details .card-details-header .close-card-details-mobile-w
 .poker-title {
   display: flex;
   justify-content: space-between;
+  align-items: center;
 }
 .poker-title .js-edit-date {
-  align-self: baseline;
-  margin-left: 5px;
+  align-self: flex-start;
+  margin-left: 6px;
 }
 .poker-result {
   display: flex;
-  flex-flow: row wrap;
+  flex-wrap: wrap;
+  gap: 7px;
 }
 .js-show-positive-poker-votes {
   cursor: pointer;
 }
 .poker-deck {
   display: grid;
-  flex-direction: column;
+  grid-auto-flow: row;
   text-align: center;
+  gap: 6px;
 }
 .poker-card-result {
-  width: 32px;
+  width: 34px;
   font-size: 1em;
   font-weight: bold;
-  padding: 4px 2px 4px 2px;
+  padding: 4px 2px;
   cursor: default;
+  border-radius: 3px;
 }
 .winner {
   font-weight: bold;
@@ -765,6 +783,7 @@ body.mobile-mode .card-details .card-details-header .close-card-details-mobile-w
 }
 .responsive-table {
   overflow-x: auto;
+  width: 100%;
 }
 .poker-table {
   display: table;
@@ -827,11 +846,15 @@ body.mobile-mode .card-details .card-details-header .close-card-details-mobile-w
   margin: auto;
   margin-right: 10px;
   width: 100px;
+  border-radius: 2px;
+  padding: 3px 6px;
 }
 .estimation-add button {
   display: inline-block;
   float: right;
   margin: auto;
+  border-radius: 2px;
+  padding: 3px 10px;
 }
 .poker-card {
   width: 48px;
@@ -850,6 +873,7 @@ body.mobile-mode .card-details .card-details-header .close-card-details-mobile-w
   text-align: center;
   position: relative;
   cursor: pointer;
+  transition: box-shadow 0.12s;
 }
 .poker-card .inner {
   display: table-cell;