From 323b05135584be21e7c52086a35ad5d9255b95db Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Fri, 30 Jan 2026 10:44:46 +0100
Subject: [PATCH] Refine DashboardWidget and LoggedInView styles: Adjust
 transition effects and dragging state in DashboardWidget for improved visual
 feedback. Update grid row height in LoggedInView for better responsiveness
 and enhance drop indicator styling for a more polished user experience.

---
 frontend/src/components/DashboardWidget.vue |  7 +++---
 frontend/src/views/home/LoggedInView.vue    | 25 +++++----------------
 2 files changed, 9 insertions(+), 23 deletions(-)

diff --git a/frontend/src/components/DashboardWidget.vue b/frontend/src/components/DashboardWidget.vue
index 0be3956..9a502e7 100644
--- a/frontend/src/components/DashboardWidget.vue
+++ b/frontend/src/components/DashboardWidget.vue
@@ -264,12 +264,11 @@ export default {
   border-radius: 8px;
   box-shadow: 0 1px 3px rgba(0,0,0,0.06);
   overflow: hidden;
-  transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
+  transition: opacity 0.2s ease, box-shadow 0.2s ease;
 }
 .dashboard-widget.is-dragging {
-  opacity: 0.5;
-  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
-  transform: rotate(2deg);
+  opacity: 0.6;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
   cursor: grabbing;
 }
 
diff --git a/frontend/src/views/home/LoggedInView.vue b/frontend/src/views/home/LoggedInView.vue
index d71930e..a6949df 100644
--- a/frontend/src/views/home/LoggedInView.vue
+++ b/frontend/src/views/home/LoggedInView.vue
@@ -400,7 +400,7 @@ export default {
 .dashboard-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
-  grid-auto-rows: 420px;
+  grid-auto-rows: 200px;
   gap: 20px;
 }
 
@@ -422,11 +422,10 @@ export default {
   outline: 2px dashed #0d6efd;
   outline-offset: 4px;
   border-radius: 8px;
-  background-color: rgba(13, 110, 253, 0.05);
 }
 
 .dashboard-grid-cell.drag-source {
-  opacity: 0.4;
+  opacity: 0.5;
 }
 
 .dashboard-drop-indicator {
@@ -434,26 +433,14 @@ export default {
   align-items: center;
   justify-content: center;
   min-height: 0;
-  padding: 0;
+  padding: 8px 0;
 }
 
 .drop-indicator-line {
   width: 100%;
-  height: 3px;
-  background: linear-gradient(90deg, transparent, #0d6efd, transparent);
-  border-radius: 2px;
-  animation: pulse-drop-indicator 1.5s ease-in-out infinite;
-}
-
-@keyframes pulse-drop-indicator {
-  0%, 100% {
-    opacity: 0.5;
-    transform: scaleX(0.8);
-  }
-  50% {
-    opacity: 1;
-    transform: scaleX(1);
-  }
+  height: 2px;
+  background-color: #0d6efd;
+  border-radius: 1px;
 }
 
 .dashboard-widget-edit {