Refactor DraggableWidget and Panel components; remove unused state variables, update canvas ID references, and enhance widget rendering logic. Improve sidebar styles for better layout and tooltip visibility.

app/src/styles/layout/sidebar.scss

@@ -42,18 +42,22 @@
       min-width: 32px;
       border-radius: #{$border-radius-large};
       position: relative;
+
       .tooltip {
         top: 6px;
         right: -168px;
+
         &::after {
           left: 0px;
           bottom: 50%;
         }
       }
+
       &:hover {
         outline: 1px solid var(--border-color);
         outline-offset: -1px;
         background: var(--background-color-solid);
+
         .tooltip {
           opacity: 1;
           transform: translateX(2px);
@@ -81,6 +85,7 @@
 
   .sidebar-left-container {
     min-height: 50vh;
+    max-width: 100%;
     padding-bottom: 4px;
     position: relative;
     display: flex;
@@ -391,6 +396,7 @@
     .tooltip {
       top: 6px;
       right: calc(100% + 6px);
+
       &::after {
         left: 100%;
         bottom: 50%;
@@ -411,10 +417,12 @@
 
       &:hover {
         outline-color: var(--border-color-accent);
+
         svg {
           transition: all 0.2s;
           scale: 1.1;
         }
+
         .tooltip {
           opacity: 1;
           transform: translateX(-2px);
@@ -425,10 +433,12 @@
     .active {
       background: var(--background-color-accent);
       outline: none;
+
       &:hover {
         svg {
           scale: 1;
         }
+
         background: var(--background-color-accent);
       }
     }
@@ -1297,10 +1307,12 @@
 
         &:hover {
           outline: 1px solid var(--border-color-accent);
+
           img {
             transition: all 0.2s;
             scale: 1.3;
           }
+
           &::after {
             top: 80px;
             right: 0;
@@ -1411,6 +1423,7 @@
           .asset-name {
             opacity: 1;
           }
+
           .asset-image {
             scale: 1.2;
           }
@@ -1424,11 +1437,9 @@
           width: 100%;
           height: 100%;
           font-size: var(--font-size-regular);
-          background: linear-gradient(
-            0deg,
-            rgba(37, 24, 51, 0) 0%,
-            rgba(52, 41, 61, 0.5) 100%
-          );
+          background: linear-gradient(0deg,
+              rgba(37, 24, 51, 0) 0%,
+              rgba(52, 41, 61, 0.5) 100%);
           pointer-events: none;
           backdrop-filter: blur(8px);
           opacity: 0;
@@ -1455,10 +1466,12 @@
 
 .skeleton-wrapper {
   display: flex;
+
   .asset-name {
     width: 40%;
     height: 10px;
   }
+
   .asset {
     width: 100%;
     height: 100%;
@@ -1467,11 +1480,26 @@
 
 .sidebar-left-wrapper,
 .sidebar-right-wrapper {
-  height: calc(50vh + 150px);
+  height: calc(54vh + 150px);
   transition: height 0.2s ease-in-out;
+  .sidebar-left-container {
+    height: 100%;
+    .sidebar-left-content-container{
+      max-height: 80%;
+      .widget-left-sideBar{
+        height: 80%;
+        .widget2D.widgets-wrapper{
+
+          min-height: 50vh;
+          height: 60%;
+
+        }
+      }
+    }
+  }
 }
 
 .sidebar-left-wrapper.closed,
 .sidebar-right-wrapper.closed {
   height: 52px;
-}
+}