From 9bd04d35050447d63219066467b9173916eeed86 Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Tue, 13 Feb 2024 01:10:46 +0900
Subject: [PATCH] =?UTF-8?q?=E3=81=AF=E3=81=BF=E5=87=BA=E3=81=9F=E3=81=A8?=
 =?UTF-8?q?=E3=81=8D=E3=81=AB=E3=82=B9=E3=82=AF=E3=83=AD=E3=83=BC=E3=83=AB?=
 =?UTF-8?q?=E3=81=99=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Layout/PageContainer.vue |  1 +
 src/components/Users/UserAccounts.vue   | 20 ++++++++++----------
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/components/Layout/PageContainer.vue b/src/components/Layout/PageContainer.vue
index a1a7dfd5..e9fb0241 100644
--- a/src/components/Layout/PageContainer.vue
+++ b/src/components/Layout/PageContainer.vue
@@ -10,6 +10,7 @@
   max-width: 1024px;
   margin: 0 auto;
   padding: 4rem 3rem 3rem;
+  overflow-x: auto;
 }
 
 @media (width <= 768px) {
diff --git a/src/components/Users/UserAccounts.vue b/src/components/Users/UserAccounts.vue
index 5d660247..d70c465f 100644
--- a/src/components/Users/UserAccounts.vue
+++ b/src/components/Users/UserAccounts.vue
@@ -5,8 +5,8 @@ import { serviceArray, type ServiceWithName } from '/@/consts/services'
 import type { Account } from '/@/lib/apis'
 
 interface Service extends ServiceWithName {
-  url: string | undefined
-  displayName: string | undefined
+  url: string | null
+  displayName: string | null
 }
 
 interface Props {
@@ -15,18 +15,18 @@ interface Props {
 
 const props = defineProps<Props>()
 
-const shownServices = computed((): Service[] => {
-  return serviceArray.map(service => {
+const shownServices = computed((): Service[] =>
+  serviceArray.map(service => {
     const account = props.accounts.find(
       account => account.type === service.type
     )
     return {
       ...service,
-      url: account?.url,
-      displayName: account?.displayName
+      url: account?.url ?? null,
+      displayName: account?.displayName ?? null
     }
   })
-})
+)
 </script>
 
 <template>
@@ -34,10 +34,10 @@ const shownServices = computed((): Service[] => {
     <a
       v-for="service in shownServices"
       :key="service.name"
-      :href="service.url"
-      :title="service.displayName"
+      :href="service.url ?? undefined"
+      :title="service.displayName ?? undefined"
       :class="$style.anchor"
-      :data-has-account="service.url !== undefined"
+      :data-has-account="service.url !== null"
     >
       <icon :name="service.icon" :class="$style.icon" />
     </a>