From 72b9c98a4fa2c0698ca34c56f3829ca5aa825940 Mon Sep 17 00:00:00 2001
From: RoryPTB <47696929+RoryPTB@users.noreply.github.com>
Date: Fri, 17 May 2024 11:59:29 +0200
Subject: [PATCH] Targets in table now wrap correctly + button breakpoint
 handling for small screens

---
 forge.config.js                       |  2 +-
 src/frontend/components/ConfigSub.vue | 45 ++++++++++++++-------------
 2 files changed, 25 insertions(+), 22 deletions(-)

diff --git a/forge.config.js b/forge.config.js
index 2f7b695..005b702 100644
--- a/forge.config.js
+++ b/forge.config.js
@@ -23,7 +23,7 @@ module.exports = {
       name: '@electron-forge/maker-squirrel',
       config: {
         authors: 'World Meteorological Organization',
-        iconUrl: 'https://raw.githubusercontent.com/wmo-im/wis2-downloader/main/public/assets/app-icon.ico',
+        iconUrl: 'https://raw.githubusercontent.com/wmo-im/wis2-downloader-gui/main/public/assets/app-icon.ico',
         setupIcon: 'public/assets/app-icon.ico',
         loadingGif: 'public/assets/install-banner.gif'
       },
diff --git a/src/frontend/components/ConfigSub.vue b/src/frontend/components/ConfigSub.vue
index 77967f5..a6c10db 100644
--- a/src/frontend/components/ConfigSub.vue
+++ b/src/frontend/components/ConfigSub.vue
@@ -97,21 +97,21 @@
                                     </v-col>
                                 </v-row>
                                 <v-card-item>
-                                    <v-table :hover="true">
+                                    <v-table :hover="true" class="equal-width">
                                         <thead>
                                             <tr>
-                                                <th scope="row" class="topic-column">
+                                                <th scope="row">
                                                     <p v-if="activeTopics.length > 0" class="medium-title">Topic</p>
                                                     <p v-else class="medium-title text-center">No topics are currently
                                                         active
                                                     </p>
                                                 </th>
-                                                <th scope="row" class="directory-column">
+                                                <th scope="row">
                                                     <p v-if="activeTopics.length > 0" class="medium-title text-center">
                                                         Sub-Directory
                                                     </p>
                                                 </th>
-                                                <th scope="row" class="button-column">
+                                                <th scope="row">
                                                     <p v-if="activeTopics.length > 0" class="medium-title text-center">
                                                         Actions</p>
                                                 </th>
@@ -129,10 +129,14 @@
                                                 <td class="text-center">
                                                     <v-btn class="mr-5" :append-icon="lgAndUp ? 'mdi-chart-box' : ''" color="#00ABC9"
                                                         variant="flat" @click.stop="monitorTopic(item.topic)">
-                                                        Monitor
+                                                        <p v-if="mdAndUp">Monitor</p>
+                                                        <v-icon v-if="!mdAndUp" icon="mdi-chart-box" />
                                                     </v-btn>
                                                     <v-btn :append-icon="lgAndUp ? 'mdi-delete' : ''" color="error" variant="flat"
-                                                        @click.stop="confirmRemoval(item.topic, 'active')">Remove</v-btn>
+                                                        @click.stop="confirmRemoval(item.topic, 'active')">
+                                                        <p v-if="mdAndUp">Remove</p>
+                                                        <v-icon v-if="!mdAndUp" icon="mdi-chart-box" />
+                                                    </v-btn>
                                                 </td>
                                             </tr>
                                         </tbody>
@@ -151,19 +155,19 @@
                                     downloader</v-card-subtitle>
 
                                 <v-card-item>
-                                    <v-table :hover="true">
+                                    <v-table :hover="true" class="equal-width">
                                         <thead>
                                             <tr>
-                                                <th scope="row" class="topic-column">
+                                                <th scope="row">
                                                     <p v-if="pendingTopics.length > 0" class="medium-title">Topic</p>
                                                     <p v-else class="medium-title text-center">No topics have been added
                                                     </p>
                                                 </th>
-                                                <th scope="row" class="directory-column">
+                                                <th scope="row">
                                                     <p v-if="pendingTopics.length > 0" class="medium-title text-center">
                                                         Sub-Directory</p>
                                                 </th>
-                                                <th scope="row" class="button-column">
+                                                <th scope="row">
                                                     <p v-if="pendingTopics.length > 0" class="medium-title text-center">
                                                         Actions
                                                     </p>
@@ -186,10 +190,14 @@
                                                     <v-btn class="mr-5" :append-icon="lgAndUp ? 'mdi-cloud-upload' : ''" color="#003DA5"
                                                         variant="flat" @click.stop="addToSubscription(item)"
                                                         :loading="makingServerRequest[item.topic]">
-                                                        Activate
+                                                        <p v-if="mdAndUp">Activate</p>
+                                                        <v-icon v-if="!mdAndUp" icon="mdi-cloud-upload" />
                                                     </v-btn>
                                                     <v-btn :append-icon="lgAndUp ? 'mdi-delete' : ''" color="error" variant="flat"
-                                                        @click.stop="confirmRemoval(item.topic, 'pending')">Remove</v-btn>
+                                                        @click.stop="confirmRemoval(item.topic, 'pending')">
+                                                        <p v-if="mdAndUp">Remove</p>
+                                                        <v-icon v-if="!mdAndUp" icon="mdi-delete" />
+                                                    </v-btn>
                                                 </td>
                                             </tr>
                                         </tbody>
@@ -1099,18 +1107,13 @@ export default defineComponent({
 </script>
 
 <style scoped>
-.topic-column {
-    width: 30%;
-}
-
-.directory-column {
-    width: 30%;
-}
 
-.button-column {
-    width: 40%;
+.equal-width th, .equal-width td {
+    width: 33%;
+    word-break: break-word; /* Ensure long words wrap */
 }
 
+/* Misc. */
 .sync-time {
     color: #666;
     opacity: 0.75;