diff --git a/web/css/components/app-detail-drawer.css b/web/css/components/app-detail-drawer.css
index dcc6d66..5216796 100644
--- a/web/css/components/app-detail-drawer.css
+++ b/web/css/components/app-detail-drawer.css
@@ -82,6 +82,14 @@
     margin-bottom: 0;
   }
 
+  .app-detail-drawer-full {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    white-space: nowrap;
+    text-decoration: none;
+  }
+
   .app-detail-drawer-body {
     flex: 1 1 auto;
     overflow-y: auto;
diff --git a/web/js/components/app-detail-drawer.js b/web/js/components/app-detail-drawer.js
index b7a2f54..5bafb0c 100644
--- a/web/js/components/app-detail-drawer.js
+++ b/web/js/components/app-detail-drawer.js
@@ -48,10 +48,10 @@ function ensureDrawerElement(labels) {
           </button>
         </div>
         <div class="app-detail-drawer-actions">
-          <a class="transparent icon-button" data-detail-drawer-full
-            target="_blank" rel="noopener"
-            aria-label="${labels.openFull}" data-tooltip="${labels.openFull}" data-tooltip-pos="bottom">
-            <i class="bi bi-box-arrow-up-right"></i>
+          <a role="button" class="secondary outline small app-detail-drawer-full" data-detail-drawer-full
+            target="_blank" rel="noopener" aria-label="${labels.openFull}">
+            <i class="bi bi-box-arrow-up-right" aria-hidden="true"></i>
+            <span>${labels.openFull}</span>
           </a>
           <button type="button" class="transparent icon-button" data-detail-drawer-close
             aria-label="${labels.close}" data-tooltip="${labels.close}" data-tooltip-pos="bottom">