style: Refine edit widget options layout and hover effects

app/src/styles/layout/sidebar.scss

@@ -78,19 +78,19 @@
         min-height: 50vh;
         max-height: 60vh;
       }
-      
+
       .template-item {
         border: 1px solid #e0e0e0;
         border-radius: 8px;
         padding: 1rem;
         transition: box-shadow 0.3s ease;
       }
-      
+
       .template-image-container {
         position: relative;
         padding-bottom: 56.25%; // 16:9 aspect ratio
       }
-      
+
       .template-image {
         position: absolute;
         width: 100%;
@@ -100,19 +100,19 @@
         cursor: pointer;
         transition: transform 0.3s ease;
       }
-      
+
       .template-details {
         display: flex;
         justify-content: space-between;
         align-items: center;
         margin-top: 0.5rem;
       }
-      
+
       .template-name {
         cursor: pointer;
         font-weight: 500;
       }
-      
+
       .delete-button {
         padding: 0.25rem 0.5rem;
         background: #ff4444;
@@ -122,14 +122,13 @@
         cursor: pointer;
         transition: opacity 0.3s ease;
       }
-      
+
       .no-templates {
         text-align: center;
         color: #666;
         padding: 2rem;
         grid-column: 1 / -1;
       }
-      
 
       .widget-left-sideBar {
         min-height: 50vh;
@@ -538,7 +537,6 @@
 
           .floating {
             width: 100%;
-
           }
         }
 
@@ -1070,7 +1068,7 @@
         .category-name {
           position: relative;
           z-index: 3;
-          font-size: var(--font-size-large);
+          font-size: var(--font-size-regular);
           // -webkit-text-fill-color: transparent;
           // -webkit-text-stroke: 1px black;
         }
@@ -1085,9 +1083,11 @@
           top: 50%;
           right: -10px;
           transform: translate(0, -50%);
-          background: linear-gradient(144.19deg,
-              #f1e7cd 16.62%,
-              #fffaef 85.81%);
+          background: linear-gradient(
+            144.19deg,
+            #f1e7cd 16.62%,
+            #fffaef 85.81%
+          );
         }
 
         .category-image {
@@ -1114,30 +1114,45 @@
       .assets {
         width: 117px;
         height: 95px;
-        border-radius: 3.59px;
+        border-radius: #{$border-radius-small};
         background-color: var(--background-color-gray);
-        padding: 8px;
-        padding-top: 12px;
         font-weight: $medium-weight;
         position: relative;
         overflow: hidden;
+        padding: 0;
+        &:hover {
+          .asset-name {
+            opacity: 1;
+          }
+        }
 
         .asset-name {
-          position: relative;
+          position: absolute;
+          top: 0;
           z-index: 3;
+          padding: 8px;
+          width: 100%;
           font-size: var(--font-size-regular);
+          background: color-mix(in srgb,
+            var(--background-color) 40%,
+            transparent);
+          backdrop-filter: blur(5px);
+          opacity: 0;
+          transition: opacity 0.3s ease;
+
+          /* Added properties for ellipsis */
+          display: -webkit-box; /* Necessary for multiline truncation */
+          -webkit-line-clamp: 2; /* Number of lines to show */
+          -webkit-box-orient: vertical; /* Box orientation for the ellipsis */
+          overflow: hidden; /* Hide overflowing content */
+          text-overflow: ellipsis; /* Add ellipsis for truncated content */
         }
 
         .asset-image {
           height: 100%;
           width: 100%;
-          position: absolute;
-          // top: 50%;
-          // right: 5px;
-          // transform: translate(0, -50%);
-          top: 0;
-          left: 0;
           z-index: 2;
+          object-fit: cover;
         }
       }
     }
@@ -1200,4 +1215,4 @@
   .assets-wrapper {
     margin: 0;
   }
-}
+}

app/src/styles/pages/realTimeViz.scss

@@ -765,20 +765,19 @@
 
 .editWidgetOptions {
   position: absolute;
-  // top: 50%;
-  // left: 50%;
-  // transform: translate(-50%, -50%);
   background-color: var(--background-color);
   z-index: 3;
   display: flex;
   flex-direction: column;
   border-radius: 6px;
   overflow: hidden;
+  padding: 4px;
 
   min-width: 150px;
 
   .option {
-    padding: 8px 10px;
+    padding: 4px 10px;
+    border-radius: #{$border-radius-small};
     color: var(--text-color);
     cursor: pointer;
 
@@ -791,7 +790,8 @@
       color: #f65648;
 
       &:hover {
-        background-color: #ffe3e0;
+        background-color: #f65648;
+        color: white;
       }
     }
   }