From 75d885ccf0dc4f8d382f22e7ab9fd87e94815df9 Mon Sep 17 00:00:00 2001
From: monica <monlovesmango@protonmail.com>
Date: Mon, 7 Nov 2022 11:25:51 -0600
Subject: [PATCH] fix: small UI issues

---
 src/components/BaseMarkdown.vue       |   4 +
 src/components/BasePost.vue           | 328 +++++++++++++-------------
 src/components/BasePostThread.vue     |   2 +-
 src/components/BaseRelayRecommend.vue |   2 +-
 src/components/BaseUserAvatar.vue     |   6 +-
 src/components/TheUserMenu.vue        |  16 +-
 src/layouts/MainLayout.vue            |   1 -
 src/pages/Event.vue                   |   6 +-
 src/pages/Feed.vue                    |   2 +-
 src/pages/Hashtag.vue                 |   7 +-
 src/pages/Inbox.vue                   |   6 +-
 src/pages/Notifications.vue           |   2 +-
 src/pages/Settings.vue                |  22 +-
 src/pages/devTools.vue                |   8 +-
 src/utils/mixin.js                    |   2 +-
 15 files changed, 202 insertions(+), 212 deletions(-)

diff --git a/src/components/BaseMarkdown.vue b/src/components/BaseMarkdown.vue
index c2d8324..5adad39 100644
--- a/src/components/BaseMarkdown.vue
+++ b/src/components/BaseMarkdown.vue
@@ -236,6 +236,10 @@ p:last-of-type {
   word-break: break-word;
   hyphens: auto !important;
   line-height: 1.3rem !important;
+  max-width: 100%;
+}
+.break-word-wrap pre {
+  overflow: auto;
 }
 </style>
 
diff --git a/src/components/BasePost.vue b/src/components/BasePost.vue
index cd00545..0ed8510 100644
--- a/src/components/BasePost.vue
+++ b/src/components/BasePost.vue
@@ -1,7 +1,7 @@
 <template>
-  <q-item
+  <div
     color='accent'
-    class='post-padding cursor-pointer no-hover'
+    class='post-padding cursor-pointer no-hover flex row no-wrap'
     clickable
     manual-focus
     :class='(hasReply ? "post-has-reply" : "") +
@@ -11,94 +11,80 @@
       (hasReplyChildren ? " post-has-child-reply" : "")'
     @click.stop="toEvent(event.id)"
   >
-  <!-- <div class='absolute-top-right flex row items-center post-info' style='z-index: 1;' @click.stop>
-    <q-item-label caption style='opacity: .8;'>{{ niceDate(event.created_at) }}</q-item-label>
-    <BaseButtonRelays
-      button-class='text-secondary'
-      :event='event'
-    />
-    <BaseButtonInfo
-      button-class='text-secondary'
-      :event='event'
-    />
-  </div> -->
-  <div
-    clickable
-    avatar
-    top
-    class='relative-position'
-  >
-    <div v-if="isReply" class="is-reply-connector"></div>
-      <BaseUserAvatar
-        :pubkey='event.pubkey'
-        size='1.5rem'
-        :round='true'
-        :bordered='hasReply || isReply || hasReplyChildren || isChildReply'
-        :hover-effect='true'
-        style='z-index: 1;'
-      />
-    <div v-if="hasReply" class="has-reply-connector"></div>
     <div
-      v-if="replyMode === 'reply'"
-      class="has-replying-connector"
-      :style='"height: " + (postHeight) + "px;"'
-    />
-    <div
-      ref='hasChildReplyConnector'
-      v-if="hasReplyChildren"
-      class="has-child-reply-connector"
-      style='visibility: hidden;'
-      :style='childReplyConnectorStyle()'
+      clickable
+      avatar
+      top
+      class='relative-position'
     >
+      <div v-if="isReply" class="is-reply-connector"></div>
+        <BaseUserAvatar
+          :pubkey='event.pubkey'
+          size='1.5rem'
+          :round='true'
+          :bordered='hasReply || isReply || hasReplyChildren || isChildReply'
+          :hover-effect='true'
+          style='z-index: 1;'
+        />
+      <div v-if="hasReply" class="has-reply-connector"></div>
       <div
-        v-for="(thread, index) in event.replies"
-        :key="thread[0].id"
-        ref="hasChildReplyConnectorTick"
-        class="has-child-reply-tick"
-        :style='childReplyTickStyle(index)'
+        v-if="replyMode === 'reply'"
+        class="has-replying-connector"
+        :style='"height: " + (postHeight) + "px;"'
       />
+      <div
+        ref='hasChildReplyConnector'
+        v-if="hasReplyChildren"
+        class="has-child-reply-connector"
+        style='visibility: hidden;'
+        :style='childReplyConnectorStyle()'
+      >
+        <div
+          v-for="(thread, index) in event.replies"
+          :key="thread[0].id"
+          ref="hasChildReplyConnectorTick"
+          class="has-child-reply-tick"
+          :style='childReplyTickStyle(index)'
+        />
+      </div>
     </div>
-  </div>
-    <q-item-section>
-    <q-item-section ref='postContent' class='relative-position' style='padding-left: .2rem;'>
+    <div class='flex column no-wrap col full-width'>
+      <q-item-section ref='postContent' class='relative-position' style='padding: 0 .2rem;'>
 
-      <div class='absolute-top-right flex row items-center post-info' style='z-index: 1;' @click.stop>
-        <q-item-label caption style='opacity: .8;'>{{ niceDate(event.created_at) }}</q-item-label>
-        <BaseButtonRelays
-          button-class='text-secondary'
-          :event='event'
-        />
-        <BaseButtonInfo
-          button-class='text-secondary'
-          :event='event'
-        />
-      </div>
-      <div class='q-pb-sm'>
-        <q-item-label caption class="text-secondary" style='opacity: .7;'>
-            <span @click.stop="toProfile(event.pubkey)">{{ shorten(event.pubkey) }}</span>
-        </q-item-label>
-        <q-space/>
-        <q-item-label :line='1' clickable>
-          <BaseUserName :pubkey="event.pubkey" :show-verified='true' class='text-bold' :show-following='true'/>
-        </q-item-label>
-        <q-item-label
-          v-if="
-            tagged &&
-            ($route.name === 'feed' || $route.name === 'profile' || $route.name === 'notifications') &&
-            !(isReply || isChildReply)
-          "
-          caption
-          class='q-pl-sm'
-        >
-          <span>in reply to&nbsp;</span>
-          <a @click.stop="toEvent(tagged)">
-            {{ shorten(tagged) }}
-          </a>
-        </q-item-label>
-      </div>
-      <!-- <q-item-label
-        class='q-pt-xs break-word-wrap'
-      > -->
+        <div class='absolute-top-right flex row items-center post-info' style='z-index: 1;' @click.stop>
+          <q-item-label class='q-pr-xs' style='opacity: .8; font-size: 90%;'>{{ niceDate(event.created_at) }}</q-item-label>
+          <BaseButtonRelays
+            button-class='text-secondary'
+            :event='event'
+          />
+          <BaseButtonInfo
+            button-class='text-secondary'
+            :event='event'
+          />
+        </div>
+        <div class='q-pb-sm'>
+          <q-item-label caption class="text-secondary" style='opacity: .7;'>
+              <span @click.stop="toProfile(event.pubkey)">{{ shorten(event.pubkey) }}</span>
+          </q-item-label>
+          <q-space/>
+          <q-item-label :line='1' clickable>
+            <BaseUserName :pubkey="event.pubkey" :show-verified='true' class='text-bold' :show-following='true'/>
+          </q-item-label>
+          <q-item-label
+            v-if="
+              tagged &&
+              ($route.name != 'event') &&
+              !(isReply || isChildReply)
+            "
+
+            class='q-pl-sm'
+          >
+            <span >in reply to&nbsp;</span>
+            <a @click.stop="toEvent(tagged)">
+              {{ shorten(tagged) }}
+            </a>
+          </q-item-label>
+        </div>
         <BaseMarkdown v-if="event.kind === 1">
           {{ event.interpolated.text }}
         </BaseMarkdown>
@@ -106,7 +92,7 @@
         <BaseMarkdown v-else> {{ cleanEvent }} </BaseMarkdown>
         <div
           v-if='!isEmbeded && (isQuote || isRepost)'
-          class='reposts flex column q-my-sm q-pa-sm'
+          class='reposts flex column'
           :clickable='false'
         >
           <BasePost
@@ -120,77 +106,77 @@
           />
         </div>
       <!-- </q-item-label> -->
-      <div
-        v-if='!isRepost && $store.state.keys.pub && (replyDepth !== -1)'
-        class='flex row items-center no-wrap reply-buttons'
-        :color="replying ? 'primary' : ''"
-        :class='replying ? "justify-between" : "justify-end"'
-      >
-        <div class='text-primary text-thin col q-pl-xs' style=' font-size: 90%; font-weight: 300;'>{{replyMode}}</div>
-        <div class='flex row no-wrap'>
-          <q-tabs
-            v-model='replyMode'
-            class='no-padding no-margin'
-            unelevated
-            dense
-            flat
-            active-color='primary'
-            :size='highlighted ? "md" : "sm"'
-            @click.stop
-          >
-            <q-tab name='embed' class='no-padding'>
-              <q-icon name='link' >
-                <q-tooltip>
-                  embed
-                </q-tooltip>
-              </q-icon>
-            </q-tab>
-            <q-tab name='repost' class='no-padding'>
-              <q-icon name='repeat' >
-                <q-tooltip>
-                  repost
-                </q-tooltip>
-              </q-icon>
-            </q-tab>
-            <q-tab name='quote' class='no-padding'>
-              <q-icon name='format_quote' >
-                <q-tooltip>
-                  quote
-                </q-tooltip>
-              </q-icon>
-            </q-tab>
-            <q-tab name='reply' class='no-padding'>
-              <q-icon name='chat_bubble_outline' class='flip-horizontal' >
-                <q-tooltip>
-                  reply
-                </q-tooltip>
-              </q-icon>
-            </q-tab>
-          </q-tabs>
-          <div class='flex row no-wrap items-center'>
-            <q-separator v-if='replyMode' color='primary' size='1px' vertical spaced :class='highlighted ? "q-mt-sm" : "q-mt-xs"'/>
-            <q-btn
-              v-if='replyMode'
-              icon="close"
-              color='primary'
-              flat
+        <div
+          v-if='!isRepost && $store.state.keys.pub && (replyDepth !== -1)'
+          class='flex row items-center no-wrap reply-buttons'
+          :color="replying ? 'primary' : ''"
+          :class='replying ? "justify-between" : "justify-end"'
+        >
+          <div class='text-primary text-thin col q-pl-xs' style=' font-size: 90%; font-weight: 300;'>{{replyMode}}</div>
+          <div class='flex row no-wrap'>
+            <q-tabs
+              v-model='replyMode'
+              class='no-padding no-margin'
+              unelevated
               dense
-              @click.stop='replyMode = null'
+              flat
+              active-color='primary'
               :size='highlighted ? "md" : "sm"'
+              @click.stop
             >
-              <q-tooltip>
-                cancel
-              </q-tooltip>
-            </q-btn>
+              <q-tab name='embed' class='no-padding'>
+                <q-icon name='link' >
+                  <q-tooltip>
+                    embed
+                  </q-tooltip>
+                </q-icon>
+              </q-tab>
+              <q-tab name='repost' class='no-padding'>
+                <q-icon name='repeat' >
+                  <q-tooltip>
+                    repost
+                  </q-tooltip>
+                </q-icon>
+              </q-tab>
+              <q-tab name='quote' class='no-padding'>
+                <q-icon name='format_quote' >
+                  <q-tooltip>
+                    quote
+                  </q-tooltip>
+                </q-icon>
+              </q-tab>
+              <q-tab name='reply' class='no-padding'>
+                <q-icon name='chat_bubble_outline' class='flip-horizontal' >
+                  <q-tooltip>
+                    reply
+                  </q-tooltip>
+                </q-icon>
+              </q-tab>
+            </q-tabs>
+            <div class='flex row no-wrap items-center'>
+              <q-separator v-if='replyMode' color='primary' size='1px' vertical spaced :class='highlighted ? "q-mt-sm" : "q-mt-xs"'/>
+              <q-btn
+                v-if='replyMode'
+                icon="close"
+                color='primary'
+                flat
+                dense
+                @click.stop='replyMode = null'
+                :size='highlighted ? "md" : "sm"'
+              >
+                <q-tooltip>
+                  cancel
+                </q-tooltip>
+              </q-btn>
+            </div>
           </div>
         </div>
-      </div>
       </q-item-section>
-      <q-item-section v-if="replyMode" class='full-width new-reply-box' ref='replyContent'>
+      <q-item-section v-if="replyMode" class='new-reply-box' ref='replyContent'>
         <q-tab-panels
           v-model="replyPanel"
           class='no-padding full-width overflow-hidden'
-          style='background-color: inherit; max-width: 100%;'
+          style='background-color: inherit; max-width: 100%; padding: 0 .25 0 0;'
           @transition='calcConnectorValues(10)'
         >
           <q-tab-panel name="embed" class='no-padding' @click.stop>
@@ -214,17 +200,17 @@
         </q-tab-panels>
       </q-item-section>
 
-      <q-item v-if='hasReplyChildren' class='no-padding no-border no-margin column full-width' >
-      <div v-for="thread in event.replies" :key="thread[0].id" ref="childReplyContent">
-        <BasePostThread
-          :events="thread"
-          :reply-depth='replyDepth + 1'
-          @resized='calcConnectorValues(10)'
-        />
+      <div v-if='hasReplyChildren' class='full-width' >
+        <div v-for="thread in event.replies" :key="thread[0].id" ref="childReplyContent">
+          <BasePostThread
+            :events="thread"
+            :reply-depth='replyDepth + 1'
+            @resized='calcConnectorValues(10)'
+          />
+        </div>
       </div>
-      </q-item>
-    </q-item-section>
-  </q-item>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -419,9 +405,11 @@ export default defineComponent({
 .post-padding {
   box-sizing: border-box;
   border-bottom: 1px dotted var(--q-accent);
-  padding: .5rem 0 0;
+  padding: .5rem 0 0 .25rem;
   margin-top: 0;
   width: 100%;
+  min-width: 100%;
+  max-width: 100%;
   overflow: hidden;
   font-size: .9rem;
 }
@@ -433,7 +421,9 @@ export default defineComponent({
 .post-highlighted .reposts {
   font-size: .9rem;
 }
-
+.reposts {
+  margin: .5rem .5rem 0 0;
+}
 .reposts .post-padding {
   border: 0;
 }
@@ -446,10 +436,15 @@ export default defineComponent({
 .post-has-reply {
   border-bottom: 0;
 }
-.post-is-reply,
 .post-is-child-reply {
   padding: 0;
 }
+.has-reply-connector,
+.is-reply-connector,
+.has-child-reply-connector,
+.has-child-reply-tick {
+  opacity: .7;
+}
 .has-reply-connector {
   width: 2px;
   position: absolute;
@@ -473,9 +468,10 @@ export default defineComponent({
   position: absolute;
   left: calc((100% / 2) - 1px);
   top: 1.5rem;
-  border-left: 2px dotted var(--q-accent);
-  border-bottom: 2px dotted var(--q-accent);
+  border-left: 2px solid var(--q-accent);
+  border-bottom: 2px solid var(--q-accent);
   z-index: 0;
+  opacity: .3;
 }
 .post-highlighted .has-replying-connector {
   top: 1.9rem;
@@ -498,10 +494,10 @@ export default defineComponent({
 }
 
 .new-reply-box {
-  border: 1px dashed var(--q-primary);
+  border: 1px solid var(--q-primary);
   border-radius: .4rem;
   padding: .3rem .3rem 0;
-  margin: 0 0 .3rem;
+  margin: 0 .3rem .3rem 0;
 }
 
 @media screen and (min-width: 600px) {
@@ -510,8 +506,8 @@ export default defineComponent({
 
 <style lang="css">
 .reposts {
-  border-radius: .25rem;
-  border: 1px dotted var(--q-accent);
+  border-radius: .75rem;
+  box-shadow: 0 0 .3rem -.0rem var(--q-accent);
   min-width: 150px;
 }
 </style>
diff --git a/src/components/BasePostThread.vue b/src/components/BasePostThread.vue
index ebe9f7a..bd57ed0 100644
--- a/src/components/BasePostThread.vue
+++ b/src/components/BasePostThread.vue
@@ -1,5 +1,5 @@
 <template>
-  <q-list ref='thread'>
+  <q-list ref='thread' class='no-padding'>
     <div
       v-for="(event, index) in filledEvents"
       :key="event.id + index"
diff --git a/src/components/BaseRelayRecommend.vue b/src/components/BaseRelayRecommend.vue
index 16358c0..374d8bf 100644
--- a/src/components/BaseRelayRecommend.vue
+++ b/src/components/BaseRelayRecommend.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex column q-gutter-md">
-      <div v-if='!listView' class="" caption>added relay:</div>
+      <div v-if='!listView'>added relay:</div>
       <BaseRelayCard :url='url' />
   </div>
 </template>
diff --git a/src/components/BaseUserAvatar.vue b/src/components/BaseUserAvatar.vue
index 5d3873f..f64164a 100644
--- a/src/components/BaseUserAvatar.vue
+++ b/src/components/BaseUserAvatar.vue
@@ -34,10 +34,10 @@ export default {
 }
 </script>
 
-<style lang='scss' scoped>
+<style lang='css' scoped>
 .bordered-avatar .q-avatar img {
-  border: 2px solid $accent;
-  background: $dark;
+  border: 2px solid var(--q-accent);
+  background: var(--q-dark);
   z-index: 1;
 }
 .hovered-avatar .q-avatar:hover {
diff --git a/src/components/TheUserMenu.vue b/src/components/TheUserMenu.vue
index 24fc7ac..24d6104 100644
--- a/src/components/TheUserMenu.vue
+++ b/src/components/TheUserMenu.vue
@@ -39,6 +39,7 @@
       clickable
       class='menu-item'
       :dense='compactMode'
+      :style='compactMode ? "" : "min-height: 2.75rem;"'
       :active="$route.name === item.title"
       active-class=''
       :to="item.to"
@@ -46,7 +47,7 @@
       :class="($route.path.split('/')[1] === item.match ? 'menu-item-active text-accent ' : '') +
         (compactMode ? 'no-margin no-padding col' : 'self-end q-px-none')"
     >
-      <q-item-section v-if='!compactMode' class='gt-sm text-uppercase'>
+      <q-item-section v-if='!compactMode' class='gt-sm text-uppercase' style='font-size: 1rem;'>
         <div>
           {{ $t(item.title) }}
         </div>
@@ -56,6 +57,7 @@
         v-if="item.icon && !compactMode"
         avatar
         class="relative-position no-padding"
+        style="min-width: 2.5rem;"
       >
         <q-icon outline :name="item.icon"/>
         <!-- <q-badge
@@ -206,18 +208,6 @@ export default defineComponent({
           to: '/messages/inbox',
           match: 'messages',
         },
-        // {
-        //   title: 'lists',
-        //   // caption: 'forum.quasar.dev',
-        //   icon: 'list',
-        //   to: '/lists',
-        // },
-        // {
-        //   title: 'profile',
-        //   icon: 'account_circle',
-        //   to: '/' + this.$store.state.keys.pub,
-        //   match: this.$store.state.keys.pub,
-        // },
         {
           title: 'settings',
           icon: 'settings',
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index c4bda51..250bafa 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -320,7 +320,6 @@ body {
   border-left: 2px solid var(--q-accent);
   display: flex;
   flex-direction: column;
-  padding: 0 .5rem;
 }
 #middle-page .q-page-container {
 }
diff --git a/src/pages/Event.vue b/src/pages/Event.vue
index 265b944..45e4998 100644
--- a/src/pages/Event.vue
+++ b/src/pages/Event.vue
@@ -1,7 +1,7 @@
 <template>
 
   <q-page ref='page'>
-    <div class="text-h5 text-bold q-py-md">{{ $t('thread') }}</div>
+    <div class="text-h5 text-bold q-py-md q-px-sm">{{ $t('thread') }}</div>
     <q-separator color='accent' size='2px'/>
     <div v-if="ancestorsCompiled.length || rootAncestor">
       <BasePostThread :events="ancestorsCompiled" is-ancestors @add-event='addEventAncestors'/>
@@ -18,13 +18,13 @@
       <div v-else>
         {{ $t('event') }} {{ $route.params.eventId }}
       </div>
-    <BaseRelayList v-if="event?.seen_on?.length" :event='event'/>
+    <BaseRelayList v-if="event?.seen_on?.length" :event='event' class='q-px-sm'/>
     </q-item>
 
     <q-separator color='accent' size='2px'/>
 
     <div v-if="childrenThreadsFiltered.length">
-      <div class="text-h6 text-bold">{{ $t('replies') }}</div>
+      <div class="text-h6 text-bold q-px-sm">{{ $t('replies') }}</div>
       <div v-for="(thread) in childrenThreadsFiltered" :key="thread[0].id">
         <BasePostThread :events="thread" @add-event='processChildEvent'/>
       </div>
diff --git a/src/pages/Feed.vue b/src/pages/Feed.vue
index 615c4f7..68308e7 100644
--- a/src/pages/Feed.vue
+++ b/src/pages/Feed.vue
@@ -1,7 +1,7 @@
 <template>
   <q-page>
     <div>
-      <div class="text-h5 text-bold q-py-md full-width flex row justify-start">
+      <div class="text-h5 text-bold q-py-md q-px-sm full-width flex row justify-start">
         {{ $t('feed') }}
       </div>
       <q-tabs
diff --git a/src/pages/Hashtag.vue b/src/pages/Hashtag.vue
index e311ee6..2aad3d9 100644
--- a/src/pages/Hashtag.vue
+++ b/src/pages/Hashtag.vue
@@ -1,6 +1,6 @@
 <template>
   <q-page>
-    <div class="text-h5 text-bold q-py-md">{{'#' + this.$route.params.hashtagId}}</div>
+    <div class="text-h5 text-bold q-py-md q-px-sm">{{'#' + this.$route.params.hashtagId}}</div>
     <q-separator color='accent' size='2px'/>
         <div>
           <BasePostThread v-for="thread in threads" :key="thread[0].id" :events="thread" @add-event='processEvent'/>
@@ -77,8 +77,3 @@ export default defineComponent({
 })
 </script>
 
-<style lang='scss' scoped>
-.q-tabs {
-  border-bottom: 1px solid $accent
-}
-</style>
diff --git a/src/pages/Inbox.vue b/src/pages/Inbox.vue
index d1a6668..90a80a3 100644
--- a/src/pages/Inbox.vue
+++ b/src/pages/Inbox.vue
@@ -1,11 +1,11 @@
 <template>
   <q-page>
-    <div class="text-h5 text-bold q-py-md full-width flex row justify-start">
+    <div class="text-h5 text-bold q-py-md q-px-sm full-width flex row justify-start">
       {{ $t('inbox') }}
     </div>
     <q-separator color='accent' size='2px'/>
 
-    <q-list class='q-py-sm q-gutter-sm'>
+    <q-list class='q-py-sm q-pr-sm q-gutter-sm'>
       <div v-if="loading" class='flex row justify-center items-start q-my-md'>
         <q-spinner-orbit color="accent"  size='md'/>
       </div>
@@ -107,5 +107,3 @@ export default {
 }
 </script>
 
-<style lang='scss' scoped>
-</style>
diff --git a/src/pages/Notifications.vue b/src/pages/Notifications.vue
index 1861ab9..f3473da 100644
--- a/src/pages/Notifications.vue
+++ b/src/pages/Notifications.vue
@@ -1,6 +1,6 @@
 <template>
   <q-page>
-    <div class="text-h5 text-bold q-py-md">{{ $t('notifications') }}</div>
+    <div class="text-h5 text-bold q-py-md q-px-sm">{{ $t('notifications') }}</div>
 
     <q-separator color='accent' size='2px'/>
     <q-infinite-scroll
diff --git a/src/pages/Settings.vue b/src/pages/Settings.vue
index 46504f1..5d627b4 100644
--- a/src/pages/Settings.vue
+++ b/src/pages/Settings.vue
@@ -1,8 +1,8 @@
 <template>
   <q-page id='settings-page'>
-    <div class="text-h5 text-bold q-py-md">{{ $t('settings') }}</div>
+    <div class="text-h5 text-bold q-py-md q-px-sm">{{ $t('settings') }}</div>
     <q-separator color='accent' size='2px'/>
-    <q-form class="q-gutter-md q-pt-sm" @submit="setMetadata">
+    <q-form class="q-gutter-md section" @submit="setMetadata">
       <div v-if='editingMetadata' class='flex justify-between' style='display: flex; gap: .2rem;'>
         <q-btn label="save" color="primary" outline size="sm" type="submit"/>
         <q-btn label="cancel" color="negative" outline size="sm" @click='cancel("metadata")'/>
@@ -47,9 +47,9 @@
       />
     </q-form>
 
-    <q-separator color='accent' spaced/>
+    <q-separator color='accent'/>
 
-    <div v-if='Object.keys(preferences).length'>
+    <div v-if='Object.keys(preferences).length' class='section'>
       <div v-if='editingPreferences' class='flex justify-between' style='display: flex; gap: .2rem;'>
         <q-btn label="save" color="primary" outline size="sm" @click='savePreferences'/>
         <q-btn label="cancel" color="negative" outline size="sm" @click='cancel("preferences")'/>
@@ -74,8 +74,8 @@
       <label for="accent">accent</label>
       <input type="color" id="accent" name="accent" :value='this.preferences.color.accent' @input='(event) => updateColor(event, "accent")'> -->
     </div>
-    <q-separator color='accent' spaced/>
-    <div>
+    <q-separator color='accent'/>
+    <div class='section'>
       <div v-if='editingRelays' class='flex justify-between' style='display: flex; gap: .2rem;'>
         <q-btn label="save" color="primary" outline size="sm" @click='saveRelays'/>
         <q-btn label="cancel" color="negative" outline size="sm" @click='cancel("relays")'/>
@@ -162,9 +162,9 @@
       </q-form>
     </div>
 
-    <q-separator color='accent' spaced/>
+    <q-separator color='accent'/>
 
-    <div class="flex no-wrap" style='gap: .2rem;'>
+    <div class="flex no-wrap section" style='gap: .2rem;'>
       <q-btn label="View your keys" color="primary" outline @click="keysDialog = true" />
       <q-btn label="logout" color="primary" outline @click="logout" />
       <q-btn label="Delete Local Data" color="negative" outline @click="hardReset" />
@@ -409,3 +409,9 @@ export default {
   }
 }
 </script>
+
+<style lang='css' scoped>
+.section {
+  padding: .5rem;
+}
+</style>
diff --git a/src/pages/devTools.vue b/src/pages/devTools.vue
index 8707d8a..4bd4e13 100644
--- a/src/pages/devTools.vue
+++ b/src/pages/devTools.vue
@@ -1,8 +1,9 @@
 <template>
   <q-page>
-    <div class="text-h5 text-bold q-py-md">dev tools</div>
+    <div class="text-h5 text-bold q-py-md q-px-sm">dev tools</div>
     <q-separator color='accent' size='2px'/>
-    <div class="text-bold q-py-md">sql query</div>
+    <div class='q-py-md q-px-sm'>
+      <div class="text-bold">sql query</div>
 
       <!-- <h2> sql query </h2> -->
       <!-- <label for='commands'>Enter some SQL</label> -->
@@ -10,7 +11,7 @@
 
       <textarea v-model='sql' id="editor"/>
       <div style='display: flex; flex-direction: row; gap: 1rem; padding: .5rem 0; align-items: center'>
-        <q-btn id="execute" color='primary' @click='execEditorContents'>Execute</q-btn>
+        <q-btn id="execute" color='primary' outline @click='execEditorContents'>Execute</q-btn>
         <!-- <button id='savedb' class="btn btn-secondary btn-sm">Save the db</button> -->
         <!-- <label class="button">Load an SQLite database file: <input type='file' id='dbfile' /></label> -->
       </div>
@@ -23,6 +24,7 @@
         :rows-per-page-options='[10, 50, 100, 0]'
       />
       <pre id="output">Results will be displayed here</pre>
+    </div>
   </q-page>
 </template>
 
diff --git a/src/utils/mixin.js b/src/utils/mixin.js
index 1ee0492..0ee2f25 100644
--- a/src/utils/mixin.js
+++ b/src/utils/mixin.js
@@ -176,7 +176,7 @@ export default {
               ${item.original.value.nip05
                 ? '<i class="notranslate material-icons text-accent mr-1 -ml-1" aria-hidden="true" role="presentation">verified</i>'
                 : ''}
-                <div class="text-secondary caption">${shorten(item.original.value.pubkey)}</div>
+                <div class="text-secondary text-caption">${shorten(item.original.value.pubkey)}</div>
               </div>
             `
         },