fix: issues 1,5,6,7,8,9

src/components/BaseButtonNIP05.vue

@@ -6,7 +6,7 @@
       </div>
       <div class='overflow-auto'>
         <q-card-section>
-          <div class="text-subtitle1 flex row overflow-auto">
+          <div class="text-subtitle1 flex row overflow-auto items-end q-gutter-sm">
             NIP05 identifier
           <a :href='NIP05Link' target='_'>{{ NIP05Link }}</a>
           </div>
@@ -14,6 +14,7 @@
           <q-inner-loading :showing="!NIP05Loaded">
             <q-spinner-orbit color="accent" size='2rem'/>
           </q-inner-loading>
+          <div>learn how to get NIP05 verified&nbsp;<a href='https://gist.github.com/metasikander/609a538e6a03b2f67e5c8de625baed3e' target='_'>here</a></div>
         </q-card-section>
       </div>
     </q-card>

src/components/BaseEmojiPicker.vue

@@ -96,6 +96,9 @@ export default {
 .emoji-mart-category{
   line-height: 0;
 }
+.emoji-mart-category .emoji-mart-emoji span {
+  cursor: pointer;
+}
 .emoji-mart-search {
   position: absolute;
   top: 0;

src/components/BaseMarkdown.vue

@@ -229,8 +229,8 @@ ul ol {
   list-style-position: outside;
   margin-left: 1rem;
 }
-p {
-  display: inline;
+p:last-of-type {
+  margin: 0
 }
 .break-word-wrap {
   overflow-wrap: break-word;

src/components/BaseUserCardActions.vue

@@ -1,7 +1,7 @@
 <template>
   <div
-    class='flex row no-wrap q-gutter-sm'
-    style=''
+    class='flex row no-wrap'
+    style='gap: .3rem;'
     :class='buttonGroupClass'
     >
     <BaseButtonCopy
@@ -9,17 +9,20 @@
       button-size='sm'
       text-color='secondary'
       tooltip-text='copy pubkey'
+      @click.stop
     />
     <BaseButtonMessage
       v-if='pubkey !== $store.state.keys.pub'
       :button-to="'/messages/' + pubkey"
       button-size='sm'
       text-color='primary'
+      @click.stop
     />
     <BaseButtonFollow
       v-if='pubkey !== $store.state.keys.pub'
       :pubkey='pubkey'
       button-size='sm'
+      @click.stop
     />
   </div>
 </template>

src/layouts/MainLayout.vue

@@ -26,8 +26,6 @@
     </div>
     <q-page-sticky position="top-right" :offset="fabPos" id='navagation-buttons'>
       <q-fab
-        icon="drag_indicator"
-        active-icon="drag_indicator"
         direction="left"
         color="accent"
         class='no-margin no-padding z-top'
@@ -43,34 +41,46 @@
             click to collapse/expand or drag to move
           </q-tooltip>
         </template>
+        <template #icon>
+          <q-icon name='drag_indicator'/>
+        </template>
+        <template #active-icon>
+          <q-icon name='drag_indicator'/>
+        </template>
         <q-btn
-          @click.prevent="$router.go(1)"
+          @click.stop="forward"
           color="primary"
           unelevated
           round
           outline
           icon="keyboard_arrow_right"
           :disable="draggingFab"
-        />
+        >
+          <q-tooltip>forward</q-tooltip>
+        </q-btn>
         <q-btn
           v-if='$route.name !== "inbox" && $route.name !== "messages"'
-          @click.prevent="scrollToTop"
+          @click.stop="scrollToTop"
           color="primary"
           unelevated
           round
           outline
           icon="keyboard_double_arrow_up"
           :disable="draggingFab"
-        />
+        >
+          <q-tooltip>scroll to top</q-tooltip>
+        </q-btn>
         <q-btn
-          @click.prevent="$router.go(-1)"
+          @click.stop="back"
           color="primary"
           unelevated
           round
           outline
           icon="keyboard_arrow_left"
           :disable="draggingFab"
-        />
+        >
+          <q-tooltip>back</q-tooltip>
+        </q-btn>
       </q-fab>
     </q-page-sticky>
   </q-layout>
@@ -134,25 +144,15 @@ export default defineComponent({
       setVerticalScrollPosition(this.$refs.pageContainer.$el, 0, 500)
     },
 
-    moveBackFab (ev) {
-      this.fabBackDragged = ev.isFirst !== true && ev.isFinal !== true
-
-      this.fabBackPos = [
-        this.fabBackPos[0] + ev.delta.x,
-        this.fabBackPos[1] - ev.delta.y
-      ]
+    back() {
+      this.$router.go(-1)
     },
 
-    moveTopFab (ev) {
-      this.fabTopDragged = ev.isFirst !== true && ev.isFinal !== true
-
-      this.fabTopPos = [
-        this.fabTopPos[0] + ev.delta.x,
-        this.fabTopPos[1] + ev.delta.y
-      ]
+    forward() {
+      this.$router.go(1)
     },
 
-    moveFab (ev) {
+    moveFab(ev) {
       this.draggingFab = ev.isFirst !== true && ev.isFinal !== true
 
       this.fabPos = [

src/pages/Messages.vue

@@ -40,7 +40,7 @@
           <div
             v-if='index === 0 || dateUTC(messages[index].created_at) !== dateUTC(messages[index - 1].created_at)'
             class='self-center text-accent datestamp'
-            :class='index === 0 ? "q-pb-md" : "q-py-md"'
+            :class='index === 0 ? "q-pb-sm" : "q-py-sm"'
           >
             {{dateUTC(event.created_at)}}
           </div>