From eb9284df47a5b01af3c76607641f41ef4166029e Mon Sep 17 00:00:00 2001
From: Jan Michek <15363559+janmichek@users.noreply.github.com>
Date: Thu, 19 Oct 2023 11:15:15 +0200
Subject: [PATCH] feat: Consider using feat view related utility classnames
 (#519)

---
 src/components/AccountActivitiesPanel.vue     | 14 ++-------
 src/components/AccountNamesPanel.vue          | 21 ++++----------
 src/components/AccountTokensPanel.vue         | 21 ++++----------
 src/components/AccountTransactionsPanel.vue   | 21 ++++----------
 .../ContractCallTransactionsPanel.vue         | 21 ++------------
 src/components/ContractDetailsPanel.vue       | 29 +++++--------------
 src/components/ContractEventsPanel.vue        | 21 ++------------
 src/components/ContractsPanel.vue             | 25 +++-------------
 src/components/DashboardAuctionsPanel.vue     | 17 ++---------
 src/components/DashboardKeyblockPanel.vue     |  7 ++---
 src/components/DashboardNamesPanel.vue        | 17 ++---------
 .../DashboardStateChannelsPanel.vue           | 17 ++---------
 src/components/DashboardTransactionPanel.vue  | 17 ++---------
 src/components/KeyblockMicroblocksPanel.vue   | 20 +++----------
 .../MicroblockTransactionsPanel.vue           | 21 ++------------
 src/components/NameDetailsPanel.vue           | 21 +++-----------
 src/components/NameHistoryPanel.vue           | 21 ++++----------
 src/components/NamePointersSpecialPanel.vue   | 29 +++++--------------
 src/components/NamesActivePanel.vue           | 21 ++++----------
 src/components/NamesExpiredPanel.vue          | 21 ++++----------
 src/components/NamesInAuctionPanel.vue        | 21 +++-----------
 src/components/NftTransfersPanel.vue          | 21 ++------------
 src/components/NftsInventoryPanel.vue         | 20 +++----------
 src/components/NftsOwnersPanel.vue            | 20 +++----------
 src/components/NftsPanel.vue                  | 21 ++------------
 src/components/NftsTemplatesOwnersPanel.vue   | 14 ++-------
 src/components/NftsTransfersPanel.vue         | 21 ++------------
 src/components/OracleEventsPanel.vue          | 21 ++++----------
 src/components/OraclesPanel.vue               | 21 ++------------
 src/components/SearchNamesPanel.vue           | 21 ++------------
 src/components/SearchTokensPanel.vue          | 21 ++------------
 .../StateChannelTransactionsPanel.vue         | 21 ++------------
 src/components/StateChannelsPanel.vue         | 21 ++------------
 src/components/TheFooter.vue                  |  5 +---
 src/components/TokenDetailsPanel.vue          | 17 ++---------
 src/components/TokenEventsPanel.vue           | 20 +++----------
 src/components/TokenHoldersPanel.vue          | 22 ++------------
 src/components/TokensPanel.vue                | 21 ++------------
 src/components/TransactionPointersPanel.vue   | 21 +++-----------
 src/components/TransactionsPanel.vue          | 25 +++-------------
 src/styles/main.css                           |  1 +
 src/styles/utilities/_responsive.css          | 12 ++++++++
 42 files changed, 143 insertions(+), 667 deletions(-)
 create mode 100644 src/styles/utilities/_responsive.css

diff --git a/src/components/AccountActivitiesPanel.vue b/src/components/AccountActivitiesPanel.vue
index ad7eb3ef3..66154e58a 100644
--- a/src/components/AccountActivitiesPanel.vue
+++ b/src/components/AccountActivitiesPanel.vue
@@ -7,12 +7,12 @@
       @prev-clicked="loadPrevActivities"
       @next-clicked="loadNextActivities">
       <account-activities-table
-        class="account-activities-panel__account-activities-table"
+        class="account-activities-panel__account-activities-table u-hidden-mobile"
         :account-details="accountDetails"
         :account-activities="accountActivities"/>
 
       <account-activities-table-condensed
-        class="account-activities-panel__account-activities-table-condensed"
+        class="u-hidden-desktop"
         :account-details="accountDetails"
         :account-activities="accountActivities"/>
     </paginated-content>
@@ -50,24 +50,14 @@ function loadNextActivities() {
 <style scoped>
 .account-activities-panel {
   padding: var(--space-4) var(--space-1);
-
   @media (--desktop) {
     padding: var(--space-4);
   }
 
   &__account-activities-table {
-    display: none;
-
     @media (--desktop) {
-      display: revert;
       margin-bottom: var(--space-2);
     }
   }
-
-  &__account-activities-table-condensed {
-    @media (--desktop) {
-      display: none;
-    }
-  }
 }
 </style>
diff --git a/src/components/AccountNamesPanel.vue b/src/components/AccountNamesPanel.vue
index b8ece6074..de1d666c6 100644
--- a/src/components/AccountNamesPanel.vue
+++ b/src/components/AccountNamesPanel.vue
@@ -5,11 +5,11 @@
       @prev-clicked="loadPrevAccountNames"
       @next-clicked="loadNextAccountNames">
       <account-names-table
-        class="account-names-panel__account-names-table"
+        class="account-names-panel__account-names-table u-hidden-mobile"
         :account-names="accountNames"/>
 
       <account-names-table-condensed
-        class="account-names-panel__account-names-table-condensed"
+        class="u-hidden-desktop"
         :account-names="accountNames"/>
     </paginated-content>
   </app-panel>
@@ -37,20 +37,9 @@ async function loadNextAccountNames() {
 </script>
 
 <style scoped>
-.account-names-panel {
-  &__account-names-table {
-    display: none;
-
-    @media (--desktop) {
-      display: revert;
-      margin-bottom: var(--space-4);
-    }
-  }
-
-  &__account-names-table-condensed {
-    @media (--desktop) {
-      display: none;
-    }
+.account-names-panel__account-names-table {
+  @media (--desktop) {
+    margin-bottom: var(--space-4);
   }
 }
 </style>
diff --git a/src/components/AccountTokensPanel.vue b/src/components/AccountTokensPanel.vue
index abb2623f1..0187e1b63 100644
--- a/src/components/AccountTokensPanel.vue
+++ b/src/components/AccountTokensPanel.vue
@@ -5,11 +5,11 @@
       @prev-clicked="loadPrevAccountTokens"
       @next-clicked="loadNextAccountTokens">
       <account-tokens-table
-        class="account-tokens-panel__account-tokens-table"
+        class="u-hidden-mobile"
         :account-tokens="accountTokens"/>
 
       <account-tokens-table-condensed
-        class="account-tokens-panel__account-tokens-table-condensed"
+        class="account-tokens-panel__account-tokens-table-condensed u-hidden-desktop"
         :account-tokens="accountTokens"/>
     </paginated-content>
   </app-panel>
@@ -37,20 +37,9 @@ async function loadNextAccountTokens() {
 </script>
 
 <style scoped>
-.account-tokens-panel {
-  &__account-tokens-table {
-    display: none;
-
-    @media (--desktop) {
-      display: revert;
-      margin-bottom: var(--space-4);
-    }
-  }
-
-  &__account-tokens-table-condensed {
-    @media (--desktop) {
-      display: none;
-    }
+.account-tokens-panel__account-tokens-table {
+  @media (--desktop) {
+    margin-bottom: var(--space-4);
   }
 }
 </style>
diff --git a/src/components/AccountTransactionsPanel.vue b/src/components/AccountTransactionsPanel.vue
index 7ea67af5e..451fe7557 100644
--- a/src/components/AccountTransactionsPanel.vue
+++ b/src/components/AccountTransactionsPanel.vue
@@ -12,11 +12,11 @@
       </template>
 
       <account-transactions-table
-        class="account-transactions-panel__account-transactions-table"
+        class="account-transactions-panel__account-transactions-table u-hidden-mobile"
         :account-transactions="accountTransactions"/>
 
       <account-transactions-table-condensed
-        class="account-transactions-panel__account-transactions-table-condensed"
+        class="u-hidden-desktop"
         :account-transactions="accountTransactions"/>
     </paginated-content>
   </app-panel>
@@ -65,20 +65,9 @@ function loadNextTransactions() {
 </script>
 
 <style scoped>
-.account-transactions-panel {
-  &__account-transactions-table {
-    display: none;
-
-    @media (--desktop) {
-      display: revert;
-      margin-bottom: var(--space-4);
-    }
-  }
-
-  &__account-transactions-table-condensed {
-    @media (--desktop) {
-      display: none;
-    }
+.account-transactions-panel__account-transactions-table {
+  @media (--desktop) {
+    margin-bottom: var(--space-4);
   }
 }
 </style>
diff --git a/src/components/ContractCallTransactionsPanel.vue b/src/components/ContractCallTransactionsPanel.vue
index 08635dd33..55e6b7fed 100644
--- a/src/components/ContractCallTransactionsPanel.vue
+++ b/src/components/ContractCallTransactionsPanel.vue
@@ -9,11 +9,11 @@
       @prev-clicked="loadPrevTransactions"
       @next-clicked="loadNextTransactions">
       <contract-call-transactions-table
-        class="contract-call-transactions-panel__table"
+        class="u-hidden-mobile"
         :contract-call-transactions="contractCallTransactions"/>
 
       <contract-call-transactions-table-condensed
-        class="contract-call-transactions-panel__table-condensed"
+        class="u-hidden-desktop"
         :contract-call-transactions="contractCallTransactions"/>
     </paginated-content>
   </app-panel>
@@ -53,20 +53,3 @@ if (process.client) {
   })
 }
 </script>
-
-<style scoped>
-.contract-call-transactions-panel {
-  &__table {
-    display: none;
-    @media (--desktop) {
-      display: revert;
-    }
-  }
-
-  &__table-condensed {
-    @media (--desktop) {
-      display: none;
-    }
-  }
-}
-</style>
diff --git a/src/components/ContractDetailsPanel.vue b/src/components/ContractDetailsPanel.vue
index 7d92cc5c1..9f53119c1 100644
--- a/src/components/ContractDetailsPanel.vue
+++ b/src/components/ContractDetailsPanel.vue
@@ -4,10 +4,10 @@
       DETAILS
     </template>
     <template #header>
-      <div class="contract-details-panel__hash">
+      <div class="u-hidden-mobile">
         <copy-chip :label="contractDetails.id"/>
       </div>
-      <div class="contract-details-panel__hash-ellipse">
+      <div class="u-hidden-desktop">
         <copy-chip
           :label="formatEllipseHash(contractDetails.id)"
           :clipboard-text="contractDetails.id"/>
@@ -58,10 +58,10 @@
           </th>
           <td class="contract-details-panel__data">
             <app-link :to="`/transactions/${contractDetails.createTransactionHash}`">
-              <span class="contract-details-panel__hash">
+              <span class="u-hidden-mobile">
                 {{ contractDetails.createTransactionHash }}
               </span>
-              <span class="contract-details-panel__hash-ellipse">
+              <span class="u-hidden-desktop">
                 {{ formatEllipseHash(contractDetails.createTransactionHash) }}
               </span>
             </app-link>
@@ -94,10 +94,10 @@
           </th>
           <td class="contract-details-panel__data">
             <app-link :to="`/accounts/${contractDetails.createdBy}`">
-              <span class="contract-details-panel__hash">
+              <span class="u-hidden-mobile">
                 {{ contractDetails.createdBy }}
               </span>
-              <span class="contract-details-panel__hash-ellipse">
+              <span class="u-hidden-desktop">
                 {{ formatEllipseHash(contractDetails.createdBy) }}
               </span>
             </app-link>
@@ -127,10 +127,10 @@
           </th>
           <td class="contract-details-panel__data">
             <app-link :to="`/accounts/${contractDetails.contractAccount}`">
-              <span class="contract-details-panel__hash">
+              <span class="u-hidden-mobile">
                 {{ contractDetails.contractAccount }}
               </span>
-              <span class="contract-details-panel__hash-ellipse">
+              <span class="u-hidden-desktop">
                 {{ formatEllipseHash(contractDetails.contractAccount) }}
               </span>
             </app-link>
@@ -273,18 +273,5 @@ const contractMiddlewareUrl = computed(() =>
       margin-bottom: 0;
     }
   }
-
-  &__hash {
-    display: none;
-    @media (--desktop) {
-      display: revert;
-    }
-  }
-
-  &__hash-ellipse {
-    @media (--desktop) {
-      display: none;
-    }
-  }
 }
 </style>
diff --git a/src/components/ContractEventsPanel.vue b/src/components/ContractEventsPanel.vue
index d3dee01ff..2b4667126 100644
--- a/src/components/ContractEventsPanel.vue
+++ b/src/components/ContractEventsPanel.vue
@@ -9,13 +9,13 @@
         v-if="contractEvents"
         :contract-details="contractDetails"
         :contract-events="contractEvents"
-        class="contract-events-panel__table"/>
+        class="u-hidden-mobile"/>
 
       <contract-events-table-condensed
         v-if="contractEvents"
         :contract-details="contractDetails"
         :contract-events="contractEvents"
-        class="contract-events-panel__table-condensed"/>
+        class="u-hidden-desktop"/>
     </paginated-content>
   </app-panel>
 </template>
@@ -40,20 +40,3 @@ function loadNextEvents() {
   fetchContractEvents({ queryParameters: contractEvents.value.next })
 }
 </script>
-
-<style scoped>
-.contract-events-panel {
-  &__table {
-    display: none;
-    @media (--desktop) {
-      display: revert;
-    }
-  }
-
-  &__table-condensed {
-    @media (--desktop) {
-      display: none;
-    }
-  }
-}
-</style>
diff --git a/src/components/ContractsPanel.vue b/src/components/ContractsPanel.vue
index 91b5b6d04..1655401f8 100644
--- a/src/components/ContractsPanel.vue
+++ b/src/components/ContractsPanel.vue
@@ -8,12 +8,12 @@
       pagination-style="history"
       @prev-clicked="loadPrevContracts"
       @next-clicked="loadNextContracts">
-      <contract-table-condensed
-        :contracts="contracts"
-        class="contracts-panel__table-condensed"/>
       <contracts-table
         :contracts="contracts"
-        class="contracts-panel__table"/>
+        class="u-hidden-mobile"/>
+      <contract-table-condensed
+        :contracts="contracts"
+        class="u-hidden-desktop"/>
     </paginated-content>
   </app-panel>
 </template>
@@ -53,20 +53,3 @@ if (process.client) {
 }
 
 </script>
-
-<style scoped>
-.contracts-panel {
-  &__table {
-    display: none;
-    @media (--desktop) {
-      display: revert;
-    }
-  }
-
-  &__table-condensed {
-    @media (--desktop) {
-      display: none;
-    }
-  }
-}
-</style>
diff --git a/src/components/DashboardAuctionsPanel.vue b/src/components/DashboardAuctionsPanel.vue
index e40f2a5a7..ad5f73fef 100644
--- a/src/components/DashboardAuctionsPanel.vue
+++ b/src/components/DashboardAuctionsPanel.vue
@@ -11,8 +11,8 @@
         name. The shorter the name, the longer the auction lives.
       </template>
     </dashboard-panel-header>
-    <dashboard-auctions-table class="dashboard-auctions-panel__table"/>
-    <dashboard-auctions-swiper class="dashboard-auctions-panel__swiper"/>
+    <dashboard-auctions-table class="u-hidden-mobile"/>
+    <dashboard-auctions-swiper class="u-hidden-desktop"/>
   </app-panel>
 </template>
 
@@ -26,18 +26,5 @@ import AppPanel from '@/components/AppPanel'
   @media (--desktop) {
     padding: var(--space-4);
   }
-
-  &__swiper {
-    @media (--desktop) {
-      display: none;
-    }
-  }
-
-  &__table {
-    display: none;
-    @media (--desktop) {
-      display: revert;
-    }
-  }
 }
 </style>
diff --git a/src/components/DashboardKeyblockPanel.vue b/src/components/DashboardKeyblockPanel.vue
index ec3c3856b..30b61c094 100644
--- a/src/components/DashboardKeyblockPanel.vue
+++ b/src/components/DashboardKeyblockPanel.vue
@@ -45,13 +45,13 @@
 
       <keyblock-table
         v-if="selectedKeyblock"
-        class="dashboard-keyblock-panel__keyblock-table"
+        class="dashboard-keyblock-panel__keyblock-table u-hidden-mobile"
         :keyblock="selectedKeyblock"
         :stats="selectedDeltaStats"/>
 
       <keyblock-table-condensed
         v-if="selectedKeyblock"
-        class="dashboard-keyblock-panel__keyblock-table-condensed"
+        class="dashboard-keyblock-panel__keyblock-table-condensed u-hidden-desktop"
         :keyblock="selectedKeyblock"
         :stats="selectedDeltaStats"/>
     </div>
@@ -95,9 +95,7 @@ const {
   }
 
   &__keyblock-table {
-    display: none;
     @media (--desktop) {
-      display: revert;
       margin-bottom: var(--space-2);
     }
   }
@@ -106,7 +104,6 @@ const {
     margin: var(--space-4) 0;
     @media (--desktop) {
       margin: 0;
-      display: none;
     }
   }
 
diff --git a/src/components/DashboardNamesPanel.vue b/src/components/DashboardNamesPanel.vue
index 8bbc2a613..1cde7cc97 100644
--- a/src/components/DashboardNamesPanel.vue
+++ b/src/components/DashboardNamesPanel.vue
@@ -10,8 +10,8 @@
         through an expired auction (name length &lt;= 12).
       </template>
     </dashboard-panel-header>
-    <dashboard-names-table class="dashboard-names-panel__table"/>
-    <dashboard-names-swiper class="dashboard-names-panel__swiper"/>
+    <dashboard-names-table class="u-hidden-mobile"/>
+    <dashboard-names-swiper class="u-hidden-desktop"/>
   </app-panel>
 </template>
 
@@ -25,18 +25,5 @@ import AppPanel from '@/components/AppPanel'
   @media (--desktop) {
     padding: var(--space-4);
   }
-
-  &__swiper {
-    @media (--desktop) {
-      display: none;
-    }
-  }
-
-  &__table {
-    display: none;
-    @media (--desktop) {
-      display: revert;
-    }
-  }
 }
 </style>
diff --git a/src/components/DashboardStateChannelsPanel.vue b/src/components/DashboardStateChannelsPanel.vue
index 29b5f73d7..ac34e6dbb 100644
--- a/src/components/DashboardStateChannelsPanel.vue
+++ b/src/components/DashboardStateChannelsPanel.vue
@@ -9,8 +9,8 @@
         {{ stateChannelsHints.stateChannel }}
       </template>
     </dashboard-panel-header>
-    <dashboard-state-channels-table class="dashboard-state-channels-panel__table"/>
-    <dashboard-state-channels-swiper class="dashboard-state-channels-panel__swiper"/>
+    <dashboard-state-channels-table class="u-hidden-mobile"/>
+    <dashboard-state-channels-swiper class="u-hidden-desktop"/>
   </app-panel>
 </template>
 <script setup>
@@ -27,18 +27,5 @@ import { stateChannelsHints } from '@/utils/hints/stateChannelsHints'
   @media (--desktop) {
     padding: var(--space-4);
   }
-
-  &__swiper {
-    @media (--desktop) {
-      display: none;
-    }
-  }
-
-  &__table {
-    display: none;
-    @media (--desktop) {
-      display: revert;
-    }
-  }
 }
 </style>
diff --git a/src/components/DashboardTransactionPanel.vue b/src/components/DashboardTransactionPanel.vue
index e59b5139c..d4af08266 100644
--- a/src/components/DashboardTransactionPanel.vue
+++ b/src/components/DashboardTransactionPanel.vue
@@ -26,12 +26,12 @@
 
     <dashboard-microblock-transactions-table
       v-if="selectedMicroblockTransactions"
-      class="dashboard-transactions-panel__transactions-table"
+      class="u-hidden-mobile"
       :transactions="selectedMicroblockTransactions"/>
 
     <transactions-swiper
       v-if="selectedMicroblockTransactions"
-      class="dashboard-transactions-panel__transactions-swiper"
+      class="u-hidden-desktop"
       :transactions="selectedMicroblockTransactions"/>
   </app-panel>
 </template>
@@ -65,19 +65,6 @@ const microblockDetailsLink = computed(() => `/microblocks/${selectedMicroblock.
     margin-bottom: var(--space-3);
   }
 
-  &__transactions-swiper {
-    @media (--desktop) {
-      display: none;
-    }
-  }
-
-  &__transactions-table {
-    display: none;
-    @media (--desktop) {
-      display: revert;
-    }
-  }
-
   &__summary {
     display: block;
     margin-bottom: var(--space-2);
diff --git a/src/components/KeyblockMicroblocksPanel.vue b/src/components/KeyblockMicroblocksPanel.vue
index 37f5f1963..c8bf86d09 100644
--- a/src/components/KeyblockMicroblocksPanel.vue
+++ b/src/components/KeyblockMicroblocksPanel.vue
@@ -10,10 +10,10 @@
       @next-clicked="loadNextMicroblocks">
       <keyblock-microblocks-table
         :microblocks="microblocks"
-        class="keyblock-microblock-panel__table"/>
+        class="keyblock-microblock-panel__table u-hidden-mobile"/>
       <keyblock-microblocks-table-condensed
         :microblocks="microblocks"
-        class="keyblock-microblock-panel__table-condensed"/>
+        class="u-hidden-desktop"/>
     </paginated-content>
   </app-panel>
 </template>
@@ -49,19 +49,7 @@ const loadNextMicroblocks = () =>
 </script>
 
 <style scoped>
-.keyblock-microblock-panel {
-  &__table {
-    margin-bottom: var(--space-4);
-    display: none;
-    @media (--desktop) {
-      display: revert;
-    }
-  }
-
-  &__table-condensed {
-    @media (--desktop) {
-      display: none;
-    }
-  }
+.keyblock-microblock-panel__table {
+  margin-bottom: var(--space-4);
 }
 </style>
diff --git a/src/components/MicroblockTransactionsPanel.vue b/src/components/MicroblockTransactionsPanel.vue
index fed54443a..4bcc0de60 100644
--- a/src/components/MicroblockTransactionsPanel.vue
+++ b/src/components/MicroblockTransactionsPanel.vue
@@ -10,10 +10,10 @@
       @next-clicked="loadNextTransactions">
       <microblock-transactions-table
         :transactions="transactions"
-        class="microblock-transactions-panel__table"/>
+        class="u-hidden-mobile"/>
       <microblock-transactions-table-condensed
         :transactions="transactions"
-        class="microblock-transactions-panel__table-condensed"/>
+        class="u-hidden-desktop"/>
     </paginated-content>
   </app-panel>
 </template>
@@ -46,20 +46,3 @@ if (process.client) {
   })
 }
 </script>
-
-<style scoped>
-.microblock-transactions-panel {
-  &__table {
-    display: none;
-    @media (--desktop) {
-      display: revert;
-    }
-  }
-
-  &__table-condensed {
-    @media (--desktop) {
-      display: none;
-    }
-  }
-}
-</style>
diff --git a/src/components/NameDetailsPanel.vue b/src/components/NameDetailsPanel.vue
index b49e29654..20c8a5b3e 100644
--- a/src/components/NameDetailsPanel.vue
+++ b/src/components/NameDetailsPanel.vue
@@ -24,10 +24,10 @@
           </th>
           <td class="name-details-panel__data">
             <app-link :to="`/accounts/${name.owner}`">
-              <span class="name-details-panel__link-text">
+              <span class="u-hidden-mobile">
                 {{ name.owner }}
               </span>
-              <span class="name-details-panel__link-text-ellipse">
+              <span class="u-hidden-desktop">
                 {{ formatEllipseHash(name.owner) }}
               </span>
             </app-link>
@@ -44,10 +44,10 @@
           </th>
           <td class="name-details-panel__data">
             <app-link :to="`/accounts/${name.bidder}`">
-              <span class="name-details-panel__link-text">
+              <span class="u-hidden-mobile">
                 {{ name.bidder }}
               </span>
-              <span class="name-details-panel__link-text-ellipse">
+              <span class="u-hidden-desktop">
                 {{ formatEllipseHash(name.bidder) }}
               </span>
             </app-link>
@@ -182,19 +182,6 @@ const isNameInAuction = computed(() =>
     text-align: right;
   }
 
-  &__link-text {
-    display: none;
-    @media (--desktop) {
-      display: revert;
-    }
-  }
-
-  &__link-text-ellipse {
-    @media (--desktop) {
-      display: none;
-    }
-  }
-
   &__name {
     overflow-wrap: anywhere;
   }
diff --git a/src/components/NameHistoryPanel.vue b/src/components/NameHistoryPanel.vue
index 322ba9ca8..ffb631bbd 100644
--- a/src/components/NameHistoryPanel.vue
+++ b/src/components/NameHistoryPanel.vue
@@ -7,12 +7,12 @@
       @next-clicked="loadNextActions">
       <name-history-table
         v-if="nameActions"
-        class="name-history-panel__name-history-table"
+        class="name-history-panel__name-history-table u-hidden-mobile"
         :actions="nameActions"/>
 
       <name-history-table-condensed
         v-if="nameActions"
-        class="name-history-panel__name-history-table-condensed"
+        class="u-hidden-desktop"
         :actions="nameActions"/>
     </paginated-content>
   </app-panel>
@@ -40,20 +40,9 @@ function loadNextActions() {
 </script>
 
 <style scoped>
-.name-history-panel {
-  &__name-history-table {
-    display: none;
-
-    @media (--desktop) {
-      display: revert;
-      margin-bottom: var(--space-4);
-    }
-  }
-
-  &__name-history-table-condensed {
-    @media (--desktop) {
-      display: none;
-    }
+.name-history-panel__name-history-table {
+  @media (--desktop) {
+    margin-bottom: var(--space-4);
   }
 }
 </style>
diff --git a/src/components/NamePointersSpecialPanel.vue b/src/components/NamePointersSpecialPanel.vue
index 15eb18c30..f01ea37af 100644
--- a/src/components/NamePointersSpecialPanel.vue
+++ b/src/components/NamePointersSpecialPanel.vue
@@ -16,10 +16,10 @@
             <app-link
               v-if="name.specialPointers.account"
               :to="`/accounts/${name.specialPointers.account}`">
-              <span class="name-pointers-special-panel__link-text">
+              <span class="u-hidden-mobile">
                 {{ name.specialPointers.account }}
               </span>
-              <span class="name-pointers-special-panel__link-text-ellipse">
+              <span class="u-hidden-desktop">
                 {{ formatEllipseHash(name.specialPointers.account) }}
               </span>
             </app-link>
@@ -40,10 +40,10 @@
             <app-link
               v-if="name.specialPointers.channel"
               :to="`/state-channels/${name.specialPointers.channel}`">
-              <span class="name-pointers-special-panel__link-text">
+              <span class="u-hidden-mobile">
                 {{ name.specialPointers.channel }}
               </span>
-              <span class="name-pointers-special-panel__link-text-ellipse">
+              <span class="u-hidden-desktop">
                 {{ formatEllipseHash(name.specialPointers.channel) }}
               </span>
             </app-link>
@@ -64,10 +64,10 @@
             <app-link
               v-if="name.specialPointers.contract"
               :to="`/contracts/${name.specialPointers.contract}`">
-              <span class="name-pointers-special-panel__link-text">
+              <span class="u-hidden-mobile">
                 {{ name.specialPointers.contract }}
               </span>
-              <span class="name-pointers-special-panel__link-text-ellipse">
+              <span class="u-hidden-desktop">
                 {{ formatEllipseHash(name.specialPointers.contract) }}
               </span>
             </app-link>
@@ -87,10 +87,10 @@
             <app-link
               v-if="name.specialPointers.oracle"
               :to="`/oracles/${name.specialPointers.oracle}`">
-              <span class="name-pointers-special-panel__link-text">
+              <span class="u-hidden-mobile">
                 {{ name.specialPointers.oracle }}
               </span>
-              <span class="name-pointers-special-panel__link-text-ellipse">
+              <span class="u-hidden-desktop">
                 {{ formatEllipseHash(name.specialPointers.oracle) }}
               </span>
             </app-link>
@@ -123,19 +123,6 @@ const { name } = storeToRefs(useNameDetailsStore())
     text-align: right;
   }
 
-  &__link-text {
-    display: none;
-    @media (--desktop) {
-      display: revert;
-    }
-  }
-
-  &__link-text-ellipse {
-    @media (--desktop) {
-      display: none;
-    }
-  }
-
   &__table-header {
     border-bottom: 1px solid var(--color-midnight-25);
   }
diff --git a/src/components/NamesActivePanel.vue b/src/components/NamesActivePanel.vue
index 25b2d4ee5..38e9e46b7 100644
--- a/src/components/NamesActivePanel.vue
+++ b/src/components/NamesActivePanel.vue
@@ -6,12 +6,12 @@
       @next-clicked="loadNextNames">
       <names-active-table
         v-if="activeNames"
-        class="names-active-panel__names-active-table"
+        class="names-active-panel__names-active-table u-hidden-mobile"
         :names="activeNames"/>
 
       <names-active-table-condensed
         v-if="activeNames"
-        class="names-active-panel__names-active-table-condensed"
+        class="u-hidden-desktop"
         :names="activeNames"/>
     </paginated-content>
   </app-panel>
@@ -39,20 +39,9 @@ function loadNextNames() {
 </script>
 
 <style scoped>
-.names-active-panel {
-  &__names-active-table {
-    display: none;
-
-    @media (--desktop) {
-      display: revert;
-      margin-bottom: var(--space-4);
-    }
-  }
-
-  &__names-active-table-condensed {
-    @media (--desktop) {
-      display: none;
-    }
+.names-active-panel__names-active-table {
+  @media (--desktop) {
+    margin-bottom: var(--space-4);
   }
 }
 </style>
diff --git a/src/components/NamesExpiredPanel.vue b/src/components/NamesExpiredPanel.vue
index ad873b88d..f305d84bf 100644
--- a/src/components/NamesExpiredPanel.vue
+++ b/src/components/NamesExpiredPanel.vue
@@ -6,12 +6,12 @@
       @next-clicked="loadNextNames">
       <names-expired-table
         v-if="expiredNames"
-        class="names-expired-panel__names-expired-table"
+        class="names-expired-panel__names-expired-table u-hidden-mobile"
         :names="expiredNames"/>
 
       <names-expired-table-condensed
         v-if="expiredNames"
-        class="names-expired-panel__names-expired-table-condensed"
+        class="u-hidden-desktop"
         :names="expiredNames"/>
     </paginated-content>
   </app-panel>
@@ -39,20 +39,9 @@ function loadNextNames() {
 </script>
 
 <style scoped>
-.names-expired-panel {
-  &__names-expired-table {
-    display: none;
-
-    @media (--desktop) {
-      display: revert;
-      margin-bottom: var(--space-4);
-    }
-  }
-
-  &__names-expired-table-condensed {
-    @media (--desktop) {
-      display: none;
-    }
+.names-expired-panel__names-expired-table {
+  @media (--desktop) {
+    margin-bottom: var(--space-4);
   }
 }
 </style>
diff --git a/src/components/NamesInAuctionPanel.vue b/src/components/NamesInAuctionPanel.vue
index b60b93db7..540cd2dc4 100644
--- a/src/components/NamesInAuctionPanel.vue
+++ b/src/components/NamesInAuctionPanel.vue
@@ -7,11 +7,11 @@
       @prev-clicked="loadPrevNames"
       @next-clicked="loadNextNames">
       <names-in-auction-table
-        class="names-in-auction-panel__names-in-auction-table"
+        class="names-in-auction-panel__names-in-auction-table u-hidden-mobile"
         :names="inAuctionNames"/>
 
       <names-in-auction-table-condensed
-        class="names-in-auction-panel__names-in-auction-table-condensed"
+        class="u-hidden-desktop"
         :names="inAuctionNames"/>
     </paginated-content>
   </app-panel>
@@ -39,20 +39,7 @@ function loadNextNames() {
 </script>
 
 <style scoped>
-.names-in-auction-panel {
-  &__names-in-auction-table {
-    display: none;
-
-    @media (--desktop) {
-      display: revert;
-      margin-bottom: var(--space-4);
-    }
-  }
-
-  &__names-in-auction-table-condensed {
-    @media (--desktop) {
-      display: none;
-    }
-  }
+.names-in-auction-panel__names-in-auction-table {
+  display: none;
 }
 </style>
diff --git a/src/components/NftTransfersPanel.vue b/src/components/NftTransfersPanel.vue
index ced4c570b..e3d60cc0a 100644
--- a/src/components/NftTransfersPanel.vue
+++ b/src/components/NftTransfersPanel.vue
@@ -7,11 +7,11 @@
       @prev-clicked="loadPrevNftTransfers"
       @next-clicked="loadNextNftTransfers">
       <nft-transfers-table
-        class="nft-transfers-panel__table"
+        class="u-hidden-mobile"
         :nft-transfers="nftTransfers"/>
 
       <nft-transfers-table-condensed
-        class="nft-transfers-panel__table-condensed"
+        class="u-hidden-desktop"
         :nft-transfers="nftTransfers"/>
     </paginated-content>
   </app-panel>
@@ -47,20 +47,3 @@ if (process.client) {
   })
 }
 </script>
-
-<style scoped>
-.nft-transfers-panel {
-  &__table {
-    display: none;
-    @media (--desktop) {
-      display: revert;
-    }
-  }
-
-  &__table-condensed {
-    @media (--desktop) {
-      display: none;
-    }
-  }
-}
-</style>
diff --git a/src/components/NftsInventoryPanel.vue b/src/components/NftsInventoryPanel.vue
index 16a9091b1..0300a6ed5 100644
--- a/src/components/NftsInventoryPanel.vue
+++ b/src/components/NftsInventoryPanel.vue
@@ -8,10 +8,10 @@
       @prev-clicked="loadPrevNftInventory">
       <nfts-inventory-table
         :nft-inventory="nftInventory"
-        class="nfts-inventory-panel__table"/>
+        class="nfts-inventory-panel__table u-hidden-mobile"/>
       <nfts-inventory-table-condensed
         :nft-inventory="nftInventory"
-        class="nfts-inventory-panel__table-condensed"/>
+        class="u-hidden-desktop"/>
     </paginated-content>
   </app-panel>
 </template>
@@ -43,19 +43,7 @@ if (process.client) {
 </script>
 
 <style scoped>
-.nfts-inventory-panel {
-  &__table {
-    display: none;
-    margin-bottom: var(--space-4);
-    @media (--desktop) {
-      display: revert;
-    }
-  }
-
-  &__table-condensed {
-    @media (--desktop) {
-      display: none;
-    }
-  }
+.nfts-inventory-panel__table {
+  margin-bottom: var(--space-4);
 }
 </style>
diff --git a/src/components/NftsOwnersPanel.vue b/src/components/NftsOwnersPanel.vue
index ce55f9563..1e79ac274 100644
--- a/src/components/NftsOwnersPanel.vue
+++ b/src/components/NftsOwnersPanel.vue
@@ -7,10 +7,10 @@
       @prev-clicked="loadPrevNftowners">
       <nfts-owners-table
         :owners="nftOwners"
-        class="nfts-owners-panel__table"/>
+        class="nfts-owners-panel__table u-hidden-mobile"/>
       <nfts-owners-table-condensed
         :owners="nftOwners"
-        class="nfts-owners-panel__table-condensed"/>
+        class="u-hidden-desktop"/>
     </paginated-content>
   </app-panel>
 </template>
@@ -36,19 +36,7 @@ async function loadPrevNftowners() {
 </script>
 
 <style scoped>
-.nfts-owners-panel {
-  &__table {
-    display: none;
-    margin-bottom: var(--space-4);
-    @media (--desktop) {
-      display: revert;
-    }
-  }
-
-  &__table-condensed {
-    @media (--desktop) {
-      display: none;
-    }
-  }
+.nfts-owners-panel__table {
+  margin-bottom: var(--space-4);
 }
 </style>
diff --git a/src/components/NftsPanel.vue b/src/components/NftsPanel.vue
index 0e8e92821..96728f069 100644
--- a/src/components/NftsPanel.vue
+++ b/src/components/NftsPanel.vue
@@ -9,10 +9,10 @@
       @next-clicked="loadNextNfts">
       <nfts-table
         :nfts="nfts"
-        class="nfts-panel__table"/>
+        class="u-hidden-mobile"/>
       <nfts-table-condensed
         :nfts="nfts"
-        class="nfts-panel__table-condensed"/>
+        class="u-hidden-desktop"/>
     </paginated-content>
   </app-panel>
 </template>
@@ -45,20 +45,3 @@ if (process.client) {
 }
 
 </script>
-
-<style scoped>
-.nfts-panel {
-  &__table {
-    display: none;
-    @media (--desktop) {
-      display: revert;
-    }
-  }
-
-  &__table-condensed {
-    @media (--desktop) {
-      display: none;
-    }
-  }
-}
-</style>
diff --git a/src/components/NftsTemplatesOwnersPanel.vue b/src/components/NftsTemplatesOwnersPanel.vue
index 7ff3d2c7b..d7f66333c 100644
--- a/src/components/NftsTemplatesOwnersPanel.vue
+++ b/src/components/NftsTemplatesOwnersPanel.vue
@@ -7,10 +7,10 @@
       @prev-clicked="loadPrevNftowners">
       <nfts-templates-owners-table
         :owners="nftOwners"
-        class="nfts-templates-owners-panel__table"/>
+        class="nfts-templates-owners-panel__table u-hidden-mobile"/>
       <nfts-templates-owners-table-condensed
         :owners="nftOwners"
-        class="nfts-templates-owners-panel__table-condensed"/>
+        class="u-hidden-desktop"/>
     </paginated-content>
   </app-panel>
 </template>
@@ -46,17 +46,7 @@ async function loadPrevNftowners() {
   }
 
   &__table {
-    display: none;
     margin-bottom: var(--space-4);
-    @media (--desktop) {
-      display: revert;
-    }
-  }
-
-  &__table-condensed {
-    @media (--desktop) {
-      display: none;
-    }
   }
 }
 </style>
diff --git a/src/components/NftsTransfersPanel.vue b/src/components/NftsTransfersPanel.vue
index a60f85c9a..26c45e0bc 100644
--- a/src/components/NftsTransfersPanel.vue
+++ b/src/components/NftsTransfersPanel.vue
@@ -7,10 +7,10 @@
       @prev-clicked="loadPrevNftTransfers"
       @next-clicked="loadNextNftTransfers">
       <nfts-transfers-table
-        class="nfts-transfers-panel__table"
+        class="u-hidden-mobile"
         :nft-transfers="nftTransfers"/>
       <nfts-transfers-table-condensed
-        class="nfts-transfers-panel__table-condensed"
+        class="u-hidden-desktop"
         :nft-transfers="nftTransfers"/>
     </paginated-content>
   </app-panel>
@@ -35,20 +35,3 @@ async function loadNextNftTransfers() {
   await fetchNftTransfers({ queryParameters: nftTransfers.value.next })
 }
 </script>
-
-<style scoped>
-.nfts-transfers-panel {
-  &__table {
-    display: none;
-    @media (--desktop) {
-      display: revert;
-    }
-  }
-
-  &__table-condensed {
-    @media (--desktop) {
-      display: none;
-    }
-  }
-}
-</style>
diff --git a/src/components/OracleEventsPanel.vue b/src/components/OracleEventsPanel.vue
index ef4f7cf1d..e82be590d 100644
--- a/src/components/OracleEventsPanel.vue
+++ b/src/components/OracleEventsPanel.vue
@@ -8,11 +8,11 @@
       @next-clicked="loadNextEvents">
       <oracle-events-table
         :oracle-events="oracleEvents"
-        class="oracle-events-panel__table"/>
+        class="oracle-events-panel__table u-hidden-mobile"/>
 
       <oracle-events-table-condensed
         :oracle-events="oracleEvents"
-        class="oracle-events-panel__table-condensed"/>
+        class="u-hidden-desktop"/>
     </paginated-content>
   </app-panel>
 </template>
@@ -45,19 +45,8 @@ if (process.client) {
 </script>
 
 <style scoped>
-.oracle-events-panel {
-  &__table {
-    display: none;
-    margin-bottom: var(--space-4);
-    @media (--desktop) {
-      display: revert;
-    }
-  }
-
-  &__table-condensed {
-    @media (--desktop) {
-      display: none;
-    }
-  }
+.oracle-events-panel__table {
+  margin-bottom: var(--space-4);
+
 }
 </style>
diff --git a/src/components/OraclesPanel.vue b/src/components/OraclesPanel.vue
index b2470944a..268ea30ec 100644
--- a/src/components/OraclesPanel.vue
+++ b/src/components/OraclesPanel.vue
@@ -11,10 +11,10 @@
         <oracles-select v-model="selectedOracleState"/>
       </template>
       <oracles-table
-        class="oracles-panel__oracles-table"
+        class="u-hidden-mobile"
         :oracles="oracles"/>
       <oracles-table-condensed
-        class="oracles-panel__oracles-table-condensed"
+        class="u-hidden-desktop"
         :oracles="oracles"/>
     </paginated-content>
   </app-panel>
@@ -91,20 +91,3 @@ if (process.client) {
 }
 
 </script>
-
-<style scoped>
-.oracles-panel {
-  &__oracles-table {
-    display: none;
-    @media (--desktop) {
-      display: revert;
-    }
-  }
-
-  &__oracles-table-condensed {
-    @media (--desktop) {
-      display: none;
-    }
-  }
-}
-</style>
diff --git a/src/components/SearchNamesPanel.vue b/src/components/SearchNamesPanel.vue
index 9fdeaffd8..f3a425491 100644
--- a/src/components/SearchNamesPanel.vue
+++ b/src/components/SearchNamesPanel.vue
@@ -7,10 +7,10 @@
       @next-clicked="loadNextNames">
       <search-names-table
         :names="namesResults"
-        class="search-names-panel__search-names-table"/>
+        class="u-hidden-mobile"/>
       <search-names-table-condensed
         :names="namesResults"
-        class="search-names-panel__search-names-table-condensed"/>
+        class="u-hidden-desktop"/>
     </paginated-content>
   </app-panel>
 </template>
@@ -38,20 +38,3 @@ async function loadNextNames() {
   await fetchNamesResults({ queryParameters: namesResults.value.next })
 }
 </script>
-
-<style scoped>
-.search-names-panel {
-  &__search-names-table {
-    display: none;
-    @media (--desktop) {
-      display: revert;
-    }
-  }
-
-  &__search-names-table-condensed {
-    @media (--desktop) {
-      display: none;
-    }
-  }
-}
-</style>
diff --git a/src/components/SearchTokensPanel.vue b/src/components/SearchTokensPanel.vue
index 56653c25a..831ed6473 100644
--- a/src/components/SearchTokensPanel.vue
+++ b/src/components/SearchTokensPanel.vue
@@ -7,10 +7,10 @@
       @next-clicked="loadNextTokens">
       <search-tokens-table
         :tokens="tokensResults"
-        class="search-tokens-panel__search-tokens-table"/>
+        class="u-hidden-mobile"/>
       <search-tokens-table-condensed
         :tokens="tokensResults"
-        class="search-tokens-panel__search-tokens-table-condensed"/>
+        class="u-hidden-desktop"/>
     </paginated-content>
   </app-panel>
 </template>
@@ -37,20 +37,3 @@ async function loadNextTokens() {
   await fetchTokenResults({ queryParameters: tokensResults.value.next })
 }
 </script>
-
-<style scoped>
-.search-tokens-panel {
-  &__search-tokens-table {
-    display: none;
-    @media (--desktop) {
-      display: revert;
-    }
-  }
-
-  &__search-tokens-table-condensed {
-    @media (--desktop) {
-      display: none;
-    }
-  }
-}
-</style>
diff --git a/src/components/StateChannelTransactionsPanel.vue b/src/components/StateChannelTransactionsPanel.vue
index ca4c57674..a3e853c6a 100644
--- a/src/components/StateChannelTransactionsPanel.vue
+++ b/src/components/StateChannelTransactionsPanel.vue
@@ -11,11 +11,11 @@
       @prev-clicked="loadPrevTransactions"
       @next-clicked="loadNextTransactions">
       <state-channel-transactions-table
-        class="state-channel-transactions-panel__table"
+        class="u-hidden-mobile"
         :transactions="stateChannelTransactions"/>
 
       <state-channel-transactions-table-condensed
-        class="state-channel-transactions-panel__table-condensed"
+        class="u-hidden-desktop"
         :transactions="stateChannelTransactions"/>
     </paginated-content>
   </app-panel>
@@ -55,20 +55,3 @@ if (process.client) {
   })
 }
 </script>
-
-<style scoped>
-.state-channel-transactions-panel {
-  &__table {
-    display: none;
-    @media (--desktop) {
-      display: revert;
-    }
-  }
-
-  &__table-condensed {
-    @media (--desktop) {
-      display: none;
-    }
-  }
-}
-</style>
diff --git a/src/components/StateChannelsPanel.vue b/src/components/StateChannelsPanel.vue
index 3ee3f6d0f..cbebc17c1 100644
--- a/src/components/StateChannelsPanel.vue
+++ b/src/components/StateChannelsPanel.vue
@@ -10,10 +10,10 @@
       @next-clicked="loadNextStateChannels">
       <state-channels-table
         :state-channels="stateChannels"
-        class="state-channels-panel__table"/>
+        class="u-hidden-mobile"/>
       <state-channels-table-condensed
         :state-channels="stateChannels"
-        class="state-channels-panel__table-condensed"/>
+        class="u-hidden-desktop"/>
     </paginated-content>
   </app-panel>
 </template>
@@ -56,20 +56,3 @@ if (process.client) {
   loadStateChannels()
 }
 </script>
-
-<style scoped>
-.state-channels-panel {
-  &__table {
-    display: none;
-    @media (--desktop) {
-      display: revert;
-    }
-  }
-
-  &__table-condensed {
-    @media (--desktop) {
-      display: none;
-    }
-  }
-}
-</style>
diff --git a/src/components/TheFooter.vue b/src/components/TheFooter.vue
index 638aa649a..72d22ef36 100644
--- a/src/components/TheFooter.vue
+++ b/src/components/TheFooter.vue
@@ -76,7 +76,7 @@
           </div>
         </div>
       </div>
-      <hr class="footer__divider">
+      <hr class="footer__divider u-hidden-mobile">
       <footer-socials/>
     </div>
   </footer>
@@ -221,11 +221,8 @@ const links = {
   }
 
   &__divider {
-    display: none;
-
     @media (--desktop) {
       margin: 80px 0;
-      display: revert;
     }
   }
 }
diff --git a/src/components/TokenDetailsPanel.vue b/src/components/TokenDetailsPanel.vue
index 15fa78726..242852628 100644
--- a/src/components/TokenDetailsPanel.vue
+++ b/src/components/TokenDetailsPanel.vue
@@ -69,10 +69,10 @@
           </th>
           <td class="token-details-panel__data">
             <app-link :to="`/contracts/${tokenDetails.contractId}`">
-              <span class="token-details-panel__hash">
+              <span class="u-hidden-mobile">
                 {{ tokenDetails.contractId }}
               </span>
-              <span class="token-details-panel__hash-ellipse">
+              <span class="u-hidden-desktop">
                 {{ formatEllipseHash(tokenDetails.contractId) }}
               </span>
             </app-link>
@@ -233,18 +233,5 @@ const marketCap = computed(() =>
       height: 24px;
     }
   }
-
-  &__hash {
-    display: none;
-    @media (--desktop) {
-      display: revert;
-    }
-  }
-
-  &__hash-ellipse {
-    @media (--desktop) {
-      display: none;
-    }
-  }
 }
 </style>
diff --git a/src/components/TokenEventsPanel.vue b/src/components/TokenEventsPanel.vue
index 3c13cfbef..618749af1 100644
--- a/src/components/TokenEventsPanel.vue
+++ b/src/components/TokenEventsPanel.vue
@@ -9,11 +9,11 @@
       <token-events-table
         v-if="tokenEvents"
         :token-events="tokenEvents"
-        class="token-events-panel__table"/>
+        class="token-events-panel__table u-hidden-mobile"/>
       <token-events-table-condensed
         v-if="tokenEvents"
         :token-events="tokenEvents"
-        class="token-events-panel__table-condensed"/>
+        class="u-hidden-desktop"/>
     </paginated-content>
   </app-panel>
 </template>
@@ -48,19 +48,7 @@ if (process.client) {
 </script>
 
 <style scoped>
-.token-events-panel {
-  &__table {
-    display: none;
-    margin-bottom: var(--space-4);
-    @media (--desktop) {
-      display: revert;
-    }
-  }
-
-  &__table-condensed {
-    @media (--desktop) {
-      display: none;
-    }
-  }
+.token-events-panel__table {
+  margin-bottom: var(--space-4);
 }
 </style>
diff --git a/src/components/TokenHoldersPanel.vue b/src/components/TokenHoldersPanel.vue
index bb3c52bcf..2e551d3e5 100644
--- a/src/components/TokenHoldersPanel.vue
+++ b/src/components/TokenHoldersPanel.vue
@@ -8,13 +8,13 @@
         v-if="tokenHolders"
         :token-holders="tokenHolders"
         :token-details="tokenDetails"
-        class="token-holders-panel__table"/>
+        class="u-hidden-mobile"/>
 
       <token-holders-table-condensed
         v-if="tokenHolders"
         :token-holders="tokenHolders"
         :token-details="tokenDetails"
-        class="token-holders-panel__table-condensed"/>
+        class="u-hidden-desktop"/>
     </paginated-content>
   </app-panel>
 </template>
@@ -46,21 +46,3 @@ if (process.client) {
   })
 }
 </script>
-
-<style scoped>
-.token-holders-panel {
-  &__table {
-    display: none;
-    margin-bottom: var(--space-4);
-    @media (--desktop) {
-      display: revert;
-    }
-  }
-
-  &__table-condensed {
-    @media (--desktop) {
-      display: none;
-    }
-  }
-}
-</style>
diff --git a/src/components/TokensPanel.vue b/src/components/TokensPanel.vue
index 07be97758..538ac5ef1 100644
--- a/src/components/TokensPanel.vue
+++ b/src/components/TokensPanel.vue
@@ -12,11 +12,11 @@
       </template>
       <tokens-table
         v-if="selectedTokens"
-        class="tokens-panel__tokens-table"
+        class="u-hidden-mobile"
         :tokens="selectedTokens"/>
       <tokens-table-condensed
         v-if="selectedTokens"
-        class="tokens-panel__tokens-table-condensed"
+        class="u-hidden-desktop"
         :tokens="selectedTokens"/>
     </paginated-content>
   </app-panel>
@@ -63,20 +63,3 @@ if (process.client) {
 }
 
 </script>
-
-<style scoped>
-.tokens-panel {
-  &__tokens-table {
-    display: none;
-    @media (--desktop) {
-      display: revert;
-    }
-  }
-
-  &__tokens-table-condensed {
-    @media (--desktop) {
-      display: none;
-    }
-  }
-}
-</style>
diff --git a/src/components/TransactionPointersPanel.vue b/src/components/TransactionPointersPanel.vue
index 61b4e83a0..f2686ed35 100644
--- a/src/components/TransactionPointersPanel.vue
+++ b/src/components/TransactionPointersPanel.vue
@@ -16,10 +16,10 @@
             <app-link
               v-if="pointers.accountPubkey"
               :to="`/accounts/${pointers.accountPubkey}`">
-              <span class="transaction-pointers-panel__link-text">
+              <span class="u-hidden-mobile">
                 {{ pointers.accountPubkey }}
               </span>
-              <span class="transaction-pointers-panel__link-text-ellipse">
+              <span class="u-hidden-desktop">
                 {{ formatEllipseHash(pointers.accountPubkey) }}
               </span>
             </app-link>
@@ -50,10 +50,10 @@
             <app-link
               v-if="pointers.contractPubkey"
               :to="`/contracts/${pointers.contractPubkey}`">
-              <span class="transaction-pointers-panel__link-text">
+              <span class="u-hidden-mobile">
                 {{ pointers.contractPubkey }}
               </span>
-              <span class="transaction-pointers-panel__link-text-ellipse">
+              <span class="u-hidden-desktop">
                 {{ formatEllipseHash(pointers.contractPubkey) }}
               </span>
             </app-link>
@@ -111,19 +111,6 @@ const pointers = computed(() => {
     text-align: right;
   }
 
-  &__link-text {
-    display: none;
-    @media (--desktop) {
-      display: revert;
-    }
-  }
-
-  &__link-text-ellipse {
-    @media (--desktop) {
-      display: none;
-    }
-  }
-
   &__row:last-of-type &__table-header {
     border-bottom: 0;
   }
diff --git a/src/components/TransactionsPanel.vue b/src/components/TransactionsPanel.vue
index 497db7ddf..ec0e2db68 100644
--- a/src/components/TransactionsPanel.vue
+++ b/src/components/TransactionsPanel.vue
@@ -11,12 +11,12 @@
       <template #header>
         <transactions-select v-model="selectedTxType"/>
       </template>
-      <transactions-table-condensed
-        :transactions="transactions"
-        class="transactions-panel__table-condensed"/>
       <transactions-table
         :transactions="transactions"
-        class="transactions-panel__table"/>
+        class="u-hidden-mobile"/>
+      <transactions-table-condensed
+        :transactions="transactions"
+        class="u-hidden-desktop"/>
     </paginated-content>
   </app-panel>
 </template>
@@ -80,20 +80,3 @@ if (process.client) {
   loadTransactions()
 }
 </script>
-
-<style scoped>
-.transactions-panel {
-  &__table {
-    display: none;
-    @media (--desktop) {
-      display: revert;
-    }
-  }
-
-  &__table-condensed {
-    @media (--desktop) {
-      display: none;
-    }
-  }
-}
-</style>
diff --git a/src/styles/main.css b/src/styles/main.css
index 865b35cc7..1121e77e7 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -16,6 +16,7 @@
 @import "elements/_table.css";
 
 @import "utilities/_ellipsis.css";
+@import "utilities/_responsive.css";
 
 /* 3rd party components */
 @import 'floating-vue/dist/style.css';
diff --git a/src/styles/utilities/_responsive.css b/src/styles/utilities/_responsive.css
new file mode 100644
index 000000000..3317d683c
--- /dev/null
+++ b/src/styles/utilities/_responsive.css
@@ -0,0 +1,12 @@
+.u-hidden-desktop {
+  @media (--desktop) {
+    display: none;
+  }
+}
+
+.u-hidden-mobile {
+  display: none;
+  @media (--desktop) {
+    display: revert;
+  }
+}
\ No newline at end of file