From 15115ffa04b077cfde396aca67a402f9691e54d0 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 19 Dec 2024 09:17:47 +0300
Subject: [PATCH 1/3] Remove unused styles from activity settings panel

---
 .../components/ActivityBar/ActivitySettings.vue | 17 ++++-------------
 1 file changed, 4 insertions(+), 13 deletions(-)

diff --git a/client/src/components/ActivityBar/ActivitySettings.vue b/client/src/components/ActivityBar/ActivitySettings.vue
index 272c4304b938..c150e3ec669d 100644
--- a/client/src/components/ActivityBar/ActivitySettings.vue
+++ b/client/src/components/ActivityBar/ActivitySettings.vue
@@ -70,8 +70,8 @@ function executeActivity(activity: Activity) {
 </script>
 
 <template>
-    <div class="activity-settings rounded no-highlight">
-        <div v-if="foundActivities" class="activity-settings-content">
+    <div class="no-highlight">
+        <div v-if="foundActivities">
             <button
                 v-for="activity in filteredActivities"
                 :key="activity.id"
@@ -122,7 +122,7 @@ function executeActivity(activity: Activity) {
                 </div>
             </button>
         </div>
-        <div v-else class="activity-settings-content">
+        <div v-else>
             <b-alert v-localize class="py-1 px-2" show> No matching activities found. </b-alert>
         </div>
     </div>
@@ -131,16 +131,6 @@ function executeActivity(activity: Activity) {
 <style lang="scss">
 @import "theme/blue.scss";
 
-.activity-settings {
-    overflow-y: hidden;
-    display: flex;
-    flex-direction: column;
-}
-
-.activity-settings-content {
-    overflow-y: auto;
-}
-
 .activity-settings-item {
     background: none;
     border: none;
@@ -148,6 +138,7 @@ function executeActivity(activity: Activity) {
     transition: none;
     width: 100%;
 }
+
 .activity-settings-item:hover {
     background: $gray-200;
 }

From c159aa4da283125fb66f1d9cba9f1ad2b6510a13 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 19 Dec 2024 09:19:39 +0300
Subject: [PATCH 2/3] Remove unused no-highlight class, since item is a button

---
 client/src/components/ActivityBar/ActivitySettings.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/ActivityBar/ActivitySettings.vue b/client/src/components/ActivityBar/ActivitySettings.vue
index c150e3ec669d..f732252bfd6c 100644
--- a/client/src/components/ActivityBar/ActivitySettings.vue
+++ b/client/src/components/ActivityBar/ActivitySettings.vue
@@ -70,7 +70,7 @@ function executeActivity(activity: Activity) {
 </script>
 
 <template>
-    <div class="no-highlight">
+    <div>
         <div v-if="foundActivities">
             <button
                 v-for="activity in filteredActivities"

From fa301729382154080061c39717d395b7ce62b351 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 19 Dec 2024 09:23:32 +0300
Subject: [PATCH 3/3] Fix styling of visualization items

---
 .../components/Panels/VisualizationPanel.vue   | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Panels/VisualizationPanel.vue b/client/src/components/Panels/VisualizationPanel.vue
index d9fbf144aa2c..70e2144c5fc1 100644
--- a/client/src/components/Panels/VisualizationPanel.vue
+++ b/client/src/components/Panels/VisualizationPanel.vue
@@ -104,11 +104,11 @@ onMounted(() => {
             <h3>Create Visualization</h3>
             <DelayedInput :delay="100" placeholder="Search visualizations" @change="query = $event" />
         </template>
-        <div class="overflow-y mt-2">
+        <div>
             <LoadingSpan v-if="isLoading" message="Loading visualizations" />
             <div v-else-if="filteredPlugins.length > 0">
                 <div v-for="plugin in filteredPlugins" :key="plugin.name">
-                    <button :data-plugin-name="plugin.name" @click="selectVisualization(plugin)">
+                    <button class="plugin-item" :data-plugin-name="plugin.name" @click="selectVisualization(plugin)">
                         <div class="d-flex">
                             <div class="plugin-thumbnail mr-2">
                                 <img v-if="plugin.logo" alt="visualization" :src="absPath(plugin.logo)" />
@@ -143,6 +143,20 @@ onMounted(() => {
 </template>
 
 <style lang="scss">
+@import "theme/blue.scss";
+
+.plugin-item {
+    background: none;
+    border: none;
+    text-align: left;
+    transition: none;
+    width: 100%;
+}
+
+.plugin-item:hover {
+    background: $gray-200;
+}
+
 .plugin-thumbnail {
     img {
         width: 2rem;