Add hover effect to color ramps

Author: gjmooney

packages/base/style/symbologyDialog.css

@@ -158,10 +158,10 @@ select option {
   visibility: hidden;
   z-index: 40;
   flex: 1 1 auto;
-  width: 100%;
+  width: 97%;
   max-height: 375px;
   background: var(--jp-input-background);
-  padding: 0 25px 0 8px;
+  padding-left: 8px;
   border: var(--jp-border-width) solid var(--jp-input-border-color);
   border-radius: 0;
   outline: none;
@@ -174,10 +174,6 @@ select option {
   visibility: visible;
 }
 
-/* .jp-gis-color-ramp-dropdown > .jp-gis-color-ramp-entry:hover {
-  background-color: #f1f1f1;
-} */
-
 .jp-gis-color-ramp-entry {
   display: flex;
   align-items: center;
@@ -192,19 +188,24 @@ select option {
 
 .jp-gis-color-label {
   position: absolute;
+  transition: transform 0.3s ease;
+}
+
+.jp-gis-color-ramp-entry:hover .jp-gis-color-label {
+  transform: scale(1.2);
 }
 
 .jp-gis-color-canvas {
   margin: 0 -7px;
   border-radius: 4px;
-  width: 354px;
+  width: 100%;
+  max-height: 38px;
 }
 
 .jp-gis-color-canvas-display {
   width: 100%;
   height: 30px;
   visibility: initial;
-  border: var(--jp-border-width) solid var(--jp-input-border-color);
 }
 
 .jp-gis-canvas-button-wrapper {