From 8263dc1c9352db0186a48c3e1405e469006d5404 Mon Sep 17 00:00:00 2001
From: Valentin Haudiquet <valentin.haudiquet@canonical.com>
Date: Fri, 1 May 2026 00:14:18 +0200
Subject: [PATCH] fix/frontend: change rune size on mobile

---
 frontend/components/rune/Page.vue | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/frontend/components/rune/Page.vue b/frontend/components/rune/Page.vue
index 7d91600..a03466e 100644
--- a/frontend/components/rune/Page.vue
+++ b/frontend/components/rune/Page.vue
@@ -86,7 +86,7 @@ refreshStyles()
     <div class="rune-spacer-bar" />
     <div class="rune-holder" style="align-content: end">
       <div class="rune-slot">
-        <img style="margin: auto" :src="CDRAGON_BASE + mapPath(secondaryStyle.iconPath)" />
+        <img class="rune-style-img" style="margin: auto" :src="CDRAGON_BASE + mapPath(secondaryStyle.iconPath)" />
       </div>
       <div
         v-for="(slot, slotIndex) in secondaryStyle.slots.slice(1, 4)"
@@ -128,6 +128,10 @@ refreshStyles()
   margin-right: 20px;
   border: 1px var(--color-on-surface) solid;
 }
+.rune-style-img {
+  width: 48px;
+  height: 48px;
+}
 
 @media only screen and (max-width: 650px) {
   .rune-slot {
@@ -143,5 +147,9 @@ refreshStyles()
     margin-left: 10px;
     margin-right: 10px;
   }
+  .rune-icon {
+    width: 24px !important;
+    height: 24px !important;
+  }
 }
 </style>