Merge pull request #19350 from guerler/fix_activity_panel_24.2

[24.2] Fix simple activity panel item style
galaxyproject · Jan 7, 2025 · 6d0bff4 · 6d0bff4
2 parents f8ae3ce + fa30172
commit 6d0bff4
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 15 deletions.
diff --git 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>
+        <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,23 +131,14 @@ 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;
     text-align: left;
     transition: none;
     width: 100%;
 }
+
 .activity-settings-item:hover {
     background: $gray-200;
 }

diff --git 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;