From a30101f8416664865d9d04f10f6a1f5d9d3ed865 Mon Sep 17 00:00:00 2001
From: Robin Dittmar <robindittmar@gmail.com>
Date: Tue, 1 Sep 2026 08:58:38 +0200
Subject: [PATCH] fix: styling for AccountsView on desktop and mobile

---
 src/components/InvitesPanel.vue |  6 ++++++
 src/views/AccountView.vue       | 12 +++++++++++-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/components/InvitesPanel.vue b/src/components/InvitesPanel.vue
index 5c9d42c..41e9554 100644
--- a/src/components/InvitesPanel.vue
+++ b/src/components/InvitesPanel.vue
@@ -384,6 +384,12 @@ function inviteDetail(invite: Invite): string {
   text-overflow: ellipsis;
 }
 
+@media (min-width: 768px) {
+  .invite-code {
+    max-width: 80ch;
+  }
+}
+
 .invite-status-pill {
   flex-shrink: 0;
   font-size: 0.65rem;
diff --git a/src/views/AccountView.vue b/src/views/AccountView.vue
index ac13f91..53df3d2 100644
--- a/src/views/AccountView.vue
+++ b/src/views/AccountView.vue
@@ -37,7 +37,7 @@ onMounted(() => {
 
     <InvitesPanel />
 
-    <h1>Pending changes</h1>
+    <h1 class="section-heading">Pending changes</h1>
 
     <section class="card info-card">
       <h4>Sync status</h4>
@@ -56,11 +56,21 @@ onMounted(() => {
 </template>
 
 <style scoped>
+@media (min-width: 768px) {
+  .page.about {
+    max-width: 780px;
+  }
+}
+
 .about h1 {
   font-size: 1.35rem;
   margin-bottom: 0.75rem;
 }
 
+.section-heading {
+  margin-top: 1.5rem;
+}
+
 .about p {
   color: var(--c-text-soft);
   font-size: 0.9rem;