From 05dea2b4d48213325152c69b6e0988901e84c9bb Mon Sep 17 00:00:00 2001
From: Nick Bernal <nick@harbourshare.com>
Date: Thu, 6 Jun 2024 19:20:20 -0700
Subject: [PATCH 1/7] Refactor overlapping comments to slide up and down

---
 packages/superdoc/package.json                |   2 +-
 packages/superdoc/src/Superdoc.vue            | 108 ++++++-----
 packages/superdoc/src/assets/test-data.js     |  77 +++++++-
 .../CommentsLayer/CommentDialog.vue           | 128 +++++++------
 .../components/CommentsLayer/CommentGroup.vue |  10 +-
 .../CommentsLayer/CommentsLayer.vue           |  42 +++--
 .../CommentsLayer/FloatingComments.vue        | 152 +++++++++++++++
 .../use-floating-conversation.js              |  18 ++
 .../HrbrFieldsLayer/HrbrFieldsLayer.vue       |  19 +-
 .../HrbrFieldsLayer/ParagraphField.vue        |   1 -
 .../HrbrFieldsLayer/SelectField.vue           |   1 -
 .../components/HrbrFieldsLayer/TextField.vue  |   1 -
 .../src/components/PdfViewer/PdfViewer.vue    | 173 +++++++++++-------
 .../superdoc/src/helpers/use-selection.js     |   4 +-
 .../superdoc/src/stores/comments-store.js     |  40 +++-
 .../superdoc/src/stores/superdoc-store.js     |   8 +-
 packages/superdoc/src/style.css               |   6 +-
 17 files changed, 586 insertions(+), 204 deletions(-)
 create mode 100644 packages/superdoc/src/components/CommentsLayer/FloatingComments.vue
 create mode 100644 packages/superdoc/src/components/CommentsLayer/use-floating-conversation.js

diff --git a/packages/superdoc/package.json b/packages/superdoc/package.json
index 9bbf053ea0..65a289014c 100644
--- a/packages/superdoc/package.json
+++ b/packages/superdoc/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@harbour-enterprises/superdoc",
   "type": "module",
-  "version": "1.0.0-alpha.8",
+  "version": "1.0.0-alpha.10",
   "files": [
     "dist"
   ],
diff --git a/packages/superdoc/src/Superdoc.vue b/packages/superdoc/src/Superdoc.vue
index 1d63064f7b..99272e1556 100644
--- a/packages/superdoc/src/Superdoc.vue
+++ b/packages/superdoc/src/Superdoc.vue
@@ -1,11 +1,11 @@
 <script setup>
-import { getCurrentInstance, ref, reactive, onMounted, onBeforeUnmount, nextTick } from 'vue'
+import { getCurrentInstance, ref, onMounted, onBeforeUnmount, nextTick, watch } from 'vue'
 import { storeToRefs } from 'pinia';
 import PdfViewer from './components/PdfViewer/PdfViewer.vue';
 import CommentsLayer from './components/CommentsLayer/CommentsLayer.vue';
 import DocumentEditor from './components/DocumentEditor/DocumentEditor.vue';
 import CommentDialog from '@/components/CommentsLayer/CommentDialog.vue';
-import CommentGroup from '@/components/CommentsLayer/CommentGroup.vue';
+import FloatingComments from '@/components/CommentsLayer/FloatingComments.vue';
 import HrbrFieldsLayer from '@/components/HrbrFieldsLayer/HrbrFieldsLayer.vue';
 import { useSuperdocStore } from '@/stores/superdoc-store';
 import { useCommentsStore } from '@/stores/comments-store';
@@ -14,23 +14,32 @@ import { useCommentsStore } from '@/stores/comments-store';
 const superdocStore = useSuperdocStore();
 const commentsStore = useCommentsStore();
 
-const { documents, isReady, documentContainers, areDocumentsReady } = storeToRefs(superdocStore);
+const {
+  documents,
+  isReady,
+  documentContainers,
+  areDocumentsReady,
+  selectionPosition,
+  activeSelection
+} = storeToRefs(superdocStore);
 const { handlePageReady, modules, user, getDocument } = superdocStore;
 
-const { getConfig, documentsWithConverations, overlappingComments, getAllConversationsFiltered } = storeToRefs(commentsStore);
-const { initialCheck } = commentsStore;
+const {
+  getConfig,
+  documentsWithConverations,
+  pendingComment,
+  floatingCommentsOffset
+} = storeToRefs(commentsStore);
+const { initialCheck, showAddComment } = commentsStore;
 const { proxy } = getCurrentInstance();
 commentsStore.proxy = proxy;
 
 // Refs
-const stageSize = reactive({});
 const layers = ref(null);
 
 // Comments layer
 const commentsLayer = ref(null);
 const toolsMenuPosition = ref(null);
-const selectionPosition = ref(null);
-const activeSelection = ref(null);
 
 // Hrbr Fields
 const hrbrFieldsLayer = ref(null);
@@ -61,27 +70,23 @@ const handleSelectionChange = (selection) => {
   toolsMenuPosition.value = {
     top: top - 25 + 'px',
     right: '-25px',
+    zIndex: 10,
   };
 }
 
 const handleSelectionDrag = (selection, e) => {
   if (!selection.selectionBounds) return;
-  activeSelection.value = selection;
-
-  // Place the tools menu at the level of the selection
   const containerBounds = selection.getContainerLocation(layers.value)
 
+  // Place the tools menu at the level of the selection
   let left = selection.selectionBounds.left;
   let top = selection.selectionBounds.top + containerBounds.top;
 
-  if (selection.selectionBounds.right - selection.selectionBounds.left < 0) {
-    left = selection.selectionBounds.right;
-  }
-
-  if (selection.selectionBounds.bottom - selection.selectionBounds.top < 0) {
-    top = selection.selectionBounds.bottom + containerBounds.top;
-  }
+  // Flip top/bottom or left/right if reverse selection
+  if (selection.selectionBounds.right - selection.selectionBounds.left < 0) left = selection.selectionBounds.right;
+  if (selection.selectionBounds.bottom - selection.selectionBounds.top < 0) top = selection.selectionBounds.bottom;
 
+  // Set the selection position
   selectionPosition.value = {
     zIndex: 500,
     position: 'absolute',
@@ -93,6 +98,7 @@ const handleSelectionDrag = (selection, e) => {
     height: Math.abs(selection.selectionBounds.bottom - selection.selectionBounds.top) + 'px',
     borderRadius: '4px',
   };
+  activeSelection.value = selection;
 }
 const handleSelectionDragEnd = () => {
   if (!selectionPosition.value) return;
@@ -101,24 +107,23 @@ const handleSelectionDragEnd = () => {
 
 const handleToolClick = (tool) => {
   const toolOptions = {
-    'comments': commentsLayer.value.addCommentEntry(activeSelection.value)
+    comments: showAddComment,
   }
 
   if (tool in toolOptions) {
-    toolOptions[tool];
+    toolOptions[tool](activeSelection.value, selectionPosition.value)
   }
+
   activeSelection.value = null;
-  selectionPosition.value = null;
   toolsMenuPosition.value = null;
 }
 
 const handleDocumentMouseDown = (e) => {
-  if (!e.target.closest('.tools')) selectionPosition.value = null
+  selectionPosition.value = null;
   document.removeEventListener('mousedown', handleDocumentMouseDown);
 }
 
 const handleHighlightClick = () => {
-  selectionPosition.value = null;
   toolsMenuPosition.value = null;
 }
 
@@ -136,28 +141,31 @@ onBeforeUnmount(() => {
 
 <template>
 <div>
-  <div class="superdoc" @mousedown="selectionPosition = null">
+  <div class="superdoc">
     <div class="layers" ref="layers">
       <div
-          v-if="toolsMenuPosition && !getConfig?.readOnly"
+          v-if="toolsMenuPosition && !getConfig?.readOnly" 
           class="tools"
           :style="toolsMenuPosition"
           @click.stop.prevent>
-        <i class="fas fa-comment-alt-lines" @click="handleToolClick('comments')"></i>
+        <i class="fas fa-comment-alt-lines" data-id="is-tool" @click.stop.prevent="handleToolClick('comments')"></i>
       </div>
 
       <div
-          v-if="!getConfig?.readOnly"
+          v-if="!getConfig?.readOnly && selectionPosition"
           :style="selectionPosition" class="sd-highlight">
       </div>
 
       <div class="document">
+        <!-- Fields layer -->
         <HrbrFieldsLayer
             v-if="'hrbr-fields' in modules && layers"
             :fields="modules['hrbr-fields']"
             class="comments-layer"
             style="z-index: 5; background-color: blue;"
             ref="hrbrFieldsLayer" />
+
+        <!-- On-document comments layer -->
         <CommentsLayer
             class="comments-layer"
             v-if="isReady && 'comments' in modules && layers"
@@ -168,6 +176,7 @@ onBeforeUnmount(() => {
             @highlight-click="handleHighlightClick" />
 
         <div class="sub-document" v-for="doc in documents" ref="documentContainers">
+          <!-- PDF renderer -->
           <PdfViewer
               v-if="doc.type === 'pdf'"
               :document-data="doc"
@@ -177,6 +186,7 @@ onBeforeUnmount(() => {
               @ready="handlePdfReady" 
               @page-loaded="handlePageReady" />
 
+          <!-- DOCX Renderer -->
           <DocumentEditor
               v-if="doc.type === 'docx'"
               :document-data="doc"
@@ -186,24 +196,17 @@ onBeforeUnmount(() => {
     </div>
 
     <div class="right-sidebar" v-if="documentsWithConverations.length && layers && isReady">
-      <template v-for="doc in documentsWithConverations">
-        <CommentDialog
-            v-for="conversation in doc.conversations"
-            class="comment-box"
-            :data-id="conversation.conversationId"
-            :data="conversation"
-            :current-document="doc"
-            :parent="layers"
-            :user="user" />
-        <CommentGroup
-            v-for="(group, index) in overlappingComments"
-            class="comment-box"
-            :user="user"
-            :data-index="index"
-            :parent="layers"
-            :current-document="doc"
-            :data="group" />
-      </template>
+      <CommentDialog
+          v-if="pendingComment"
+          :data="pendingComment"
+          :current-document="getDocument(pendingComment.documentId)"
+          :user="user" 
+          :parent="layers" />
+
+      <FloatingComments
+          v-for="doc in documentsWithConverations"
+          :parent="layers"
+          :current-document="doc" />
     </div>
   </div>
 </div>
@@ -213,8 +216,8 @@ onBeforeUnmount(() => {
 /* Right sidebar drawer */
 .right-sidebar {
   width: 320px;
-  padding: 10px;
-  position: relative;
+  padding: 0 10px;
+  min-height: 100%;
 }
 
 /* General Styles */
@@ -298,4 +301,15 @@ onBeforeUnmount(() => {
   background-color: #DBDBDB;
 }
 
+@media (max-width: 768px) {
+  .sub-document {
+    max-width: 100%;
+    overflow: hidden;
+  }
+  .right-sidebar {
+    padding: 10px;
+    width: 55px;
+    position: relative;
+  }
+}
 </style>
diff --git a/packages/superdoc/src/assets/test-data.js b/packages/superdoc/src/assets/test-data.js
index c99c5725d5..18f2e25e8a 100644
--- a/packages/superdoc/src/assets/test-data.js
+++ b/packages/superdoc/src/assets/test-data.js
@@ -540,8 +540,9 @@ export const fields = [
   }
 ]
 
-export const conversations = [{
-  "conversationId": "384db7b4-d95c-478e-bd3e-03bacaed6fc5",
+export const conversations = [
+    {
+  "conversationId": "convo-1",
   "documentId": "456",
   "creatorEmail": "nick@harbourshare.com",
   "creatorName": "Nick Bernal",
@@ -567,8 +568,45 @@ export const conversations = [{
   },
   "markedDone": null,
   "isFocused": true
-},{
-    "conversationId": "384db7b4-d95c-478e-bd3e-ABC",
+},
+{
+    "conversationId": "convo-2",
+    "documentId": "456",
+    "creatorEmail": "nick@harbourshare.com",
+    "creatorName": "Nick Bernal",
+    "comments": [
+        {
+            "comment": "initial top COMMENT",
+            "user": {
+                "name": "Nick Bernal",
+                "email": "nick@harbourshare.com"
+            },
+            "timestamp": "2024-05-31T19:18:25.522Z"
+        },
+        {
+            "comment": "comment in thread",
+            "user": {
+                "name": "Nick Bernal",
+                "email": "nick@harbourshare.com"
+            },
+            "timestamp": "2024-05-31T19:20:25.522Z"
+        }
+    ],
+    "selection": {
+        "documentId": "456",
+        "page": "1",
+        "selectionBounds": {
+            "top": 0.296875,
+            "left": 500.91461181640625,
+            "bottom": 200.296875,
+            "right": 550.99163818359375
+        }
+    },
+    "markedDone": null,
+    "isFocused": true
+  },
+  {
+    "conversationId": "convo-3",
     "documentId": "456",
     "creatorEmail": "nick@harbourshare.com",
     "creatorName": "Nick Bernal",
@@ -594,7 +632,36 @@ export const conversations = [{
     },
     "markedDone": null,
     "isFocused": true
-  }]
+  },
+  {
+    "conversationId": "convo-4-page2",
+    "documentId": "456",
+    "creatorEmail": "nick@harbourshare.com",
+    "creatorName": "Nick Bernal",
+    "comments": [
+        {
+            "comment": "pg1 - 1",
+            "user": {
+                "name": "Nick Bernal",
+                "email": "nick@harbourshare.com"
+            },
+            "timestamp": "2024-05-31T19:18:25.522Z"
+        }
+    ],
+    "selection": {
+        "documentId": "456",
+        "page": "2",
+        "selectionBounds": {
+            "top": 105.296875,
+            "left": 413.91461181640625,
+            "bottom": 125.296875,
+            "right": 487.99163818359375
+        }
+    },
+    "markedDone": null,
+    "isFocused": true
+  },
+]
 
 
 export const annotations = [
diff --git a/packages/superdoc/src/components/CommentsLayer/CommentDialog.vue b/packages/superdoc/src/components/CommentsLayer/CommentDialog.vue
index b0c551b7f3..63afcbb3cb 100644
--- a/packages/superdoc/src/components/CommentsLayer/CommentDialog.vue
+++ b/packages/superdoc/src/components/CommentsLayer/CommentDialog.vue
@@ -8,12 +8,12 @@ import Avatar from '@/components/general/Avatar.vue';
 
 const superdocStore = useSuperdocStore();
 const commentsStore = useCommentsStore();
-const { COMMENT_EVENTS, getCommentLocation, checkOverlaps } = commentsStore;
-const { getConfig, activeComment, overlappingComments } = storeToRefs(commentsStore);
+const { COMMENT_EVENTS } = commentsStore;
+const { getConfig, activeComment, pendingComment } = storeToRefs(commentsStore);
 const { areDocumentsReady } = superdocStore;
+const { selectionPosition } = storeToRefs(superdocStore);
 const { proxy } = getCurrentInstance();
 
-const emit = defineEmits(['click-outside']);
 const props = defineProps({
   user: {
     type: Object,
@@ -31,19 +31,16 @@ const props = defineProps({
     type: Object,
     required: true,
   },
-  showGrouped: {
-    type: Boolean,
-    required: false,
-    default: false,
-  },
 });
 
+const emit = defineEmits(['click-outside', 'ready', 'dialog-exit']);
 const currentElement = ref(null);
 const inputIsFocused = ref(false);
 const input = ref(null);
 const addComment = () => {
   if (!input.value?.value) return;
 
+  // create the new comment for the conversation
   const comment = useComment({
     user: {
       email: props.user.email,
@@ -53,10 +50,24 @@ const addComment = () => {
     comment: input.value.value,
   });
 
-  props.data.comments.push(comment);
+  // If this conversation is pending addition, add to the document first
+  if (pendingComment.value.conversationId === props.data.conversationId) {
+    const newConversation = { ...pendingComment.value }
+
+     // Remove the pending comment
+     pendingComment.value = null;
+    
+    // Reset the original selection
+    selectionPosition.value = null;
+    newConversation.comments.push(comment);
+    props.currentDocument.conversations.push(newConversation);
+    proxy.$superdoc.broadcastComments(COMMENT_EVENTS.ADD, props.data.getValues());
+  } else {
+    props.data.comments.push(comment);
+    proxy.$superdoc.broadcastComments(COMMENT_EVENTS.ADD, props.data.getValues());
+  }
+
   input.value.value = '';
-  proxy.$superdoc.broadcastComments(COMMENT_EVENTS.ADD, props.data.getValues());
-  checkOverlaps(currentElement.value, props.data, props.currentDocument);
 }
 
 function formatDate(timestamp) {
@@ -78,36 +89,37 @@ const handleKeyUp = () => {
 }
 
 const getSidebarCommentStyle = computed(() => {
-  const style = {}
+  const style = {};
   if (isActiveComment.value) {
     style.backgroundColor = 'white';
     style.zIndex = 10;
   }
 
-  if (!props.parent) {
-    style.position = 'relative';
-    return style;
+  if (!props.data.comments.length && currentElement.value) {
+    const selectionBounds = props.data.selection.getContainerLocation(props.parent)
+    const bounds = props.data.selection.selectionBounds;
+    style.top = bounds.top + selectionBounds.top + 'px';
+    style.width = 300 + 'px';
   }
 
-  const topOffset = 10;
-  const location = getCommentLocation(props.data.selection, props.parent);
-  if (!location) return {};
-
-  style.top = location.top - topOffset + 'px';
   return style;
 });
 
 const cleanConversations = () => {
   if (props.data.comments.length) return;
   const id = props.data.conversationId;
+  pendingComment.value = null;
   props.currentDocument.removeConversation(id);
   proxy.$superdoc.broadcastComments(COMMENT_EVENTS.DELETED, id);
 }
 
 const handleClickOutside = (e) => {
-  if (e.target.dataset.id) activeComment.value = e.target.dataset.id;
-  else activeComment.value = null;
-  cleanConversations();
+  if (activeComment.value === props.data.conversationId) {
+    emit('dialog-exit');
+    if (e.target.dataset.id) activeComment.value = e.target.dataset.id;
+    else activeComment.value = null;
+    cleanConversations();
+  }
 }
 
 const setFocus = () => {
@@ -119,22 +131,11 @@ const markDone = () => {
   convo.markDone(props.user.email, props.user.name);
   props.currentDocument.removeConversation(convo.conversationId);
   proxy.$superdoc.broadcastComments(COMMENT_EVENTS.RESOLVED, convo.getValues());
-
-  const group = overlappingComments.value.find((g) => g.includes(props.data));
-  if (!group) return;
-  const index = group.findIndex((c) => c.conversationId === props.data.conversationId);
-  if (index > -1) group.splice(index, 1);
-  if (group.length === 1) {
-    const conversation = group[0];
-    const groupIndex = overlappingComments.value.findIndex((g) => g.includes(conversation));
-
-    overlappingComments.value.splice(groupIndex, 1);
-    conversation.group = false;
-  }
 }
 
 const cancelComment = () => {
   activeComment.value = null;
+  pendingComment.value = null;
   if (!props.data.comments.length) {
     cleanConversations();
   }
@@ -144,28 +145,26 @@ const isActiveComment = computed(() => {
   return activeComment.value === props.data.conversationId;
 });
 
-const trackContainers = (e) => {
-  currentElement.value = e;
-  const conversations = props.currentDocument.conversations;
-  const currentConversation = conversations.find((c) => c.conversationId === props.data.conversationId);
-  if (!currentConversation) return;
-  currentConversation.conversationElement = e;
-}
+
+onMounted(() => {
+  emit('ready', props.data.conversationId, currentElement);
+});
 </script>
 
 <template>
   <div
-      v-if="areDocumentsReady && (!props.data.group || (props.data.group && props.showGrouped))"
+      v-if="areDocumentsReady"
       class="comments-dialog"
+      :class="{ 'is-active': isActiveComment }"
       @click.stop.prevent="setFocus"
       v-click-outside="handleClickOutside"
-      :style="getSidebarCommentStyle"
       :id="data.conversationId"
-      :ref="trackContainers">
+      :style="getSidebarCommentStyle"
+      ref="currentElement">
 
-    <div v-for="(item, index) in data.comments">
+    <div v-for="(item, index) in data.comments" class="comment-container">
       <div class="card-section comment-header">
-        <div class="comment-header">
+        <div class="comment-header-left">
           <div class="avatar">
             <Avatar :user="item.user" />
           </div>
@@ -202,7 +201,9 @@ const trackContainers = (e) => {
       </div>
     </div>
 
-    <div class="card-section comment-footer" v-if="!getConfig.readOnly && isActiveComment && !props.data.markedDone">
+    <div
+        class="card-section comment-footer"
+        v-if="!getConfig.readOnly && isActiveComment && !props.data.markedDone">
       <button class="sd-button primary" @click.stop.prevent="addComment">Comment</button>
       <button class="sd-button" @click.stop.prevent="cancelComment">Cancel</button>
     </div>
@@ -214,16 +215,18 @@ const trackContainers = (e) => {
   position: absolute;
   display: flex;
   flex-direction: column;
-  position: absolute;
-  padding: 16px;
+  padding: 12px;
   border-radius: 12px;
   background-color: #EDEDED;
   transition: background-color 250ms ease;
-  -webkit-box-shadow: 0px 0px 2px 2px rgba(50, 50, 50, 0.15);
-  -moz-box-shadow: 0px 0px 2px 2px rgba(50, 50, 50, 0.15);
-  box-shadow: 0px 0px 2px 2px rgba(50, 50, 50, 0.15);
+  -webkit-box-shadow: 0px 0px 1px 1px rgba(50, 50, 50, 0.15);
+  -moz-box-shadow: 0px 0px 1px 1px rgba(50, 50, 50, 0.15);
+  box-shadow: 0px 0px 1px 1px rgba(50, 50, 50, 0.15);
   z-index: 5;
 }
+.is-active {
+  z-index: 10;
+}
 .overflow-menu {
   flex-shrink: 1;
   display: flex;
@@ -243,16 +246,14 @@ const trackContainers = (e) => {
 .overflow-menu i:hover {
   background-color: #DBDBDB;
 }
-.card-section {
-  margin: 5px 0;
-}
 
 .comment-entry {
   flex-grow: 1;
+  margin: 5px 0;
 }
 .comment-entry input {
   border-radius: 12px;
-  padding: 10px 14px;
+  padding: 6px 10px;
   outline: none;
   border: 1px solid #DBDBDB;
   width: 100%;
@@ -263,6 +264,11 @@ const trackContainers = (e) => {
   align-items: center;
   justify-content: space-between;
 }
+.comment-header-left {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
 .avatar {
   margin-right: 10px;
 }
@@ -273,20 +279,26 @@ const trackContainers = (e) => {
 }
 .user-name {
   font-weight: 600;
+  line-height: 1.2em;
 }
 .user-timestamp {
+  line-height: 1.2em;
   font-size: 12px;
   color: #999;
 }
 .sd-button {
   margin-right: 5px;
+  font-size: 12px;
 }
 .comment {
   font-size: 14px;
-  margin: 10px 0;
+  margin: 5px 0;
 }
 .conversation-item {
   border-bottom: 1px solid #DBDBDB;
   padding-bottom: 10px;
 }
+.comment-footer {
+  margin: 5px 0;
+}
 </style>
\ No newline at end of file
diff --git a/packages/superdoc/src/components/CommentsLayer/CommentGroup.vue b/packages/superdoc/src/components/CommentsLayer/CommentGroup.vue
index 1f251855e2..b8a9208aa3 100644
--- a/packages/superdoc/src/components/CommentsLayer/CommentGroup.vue
+++ b/packages/superdoc/src/components/CommentsLayer/CommentGroup.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref } from 'vue';
+import { computed, nextTick, ref } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useCommentsStore } from '@/stores/comments-store';
 import CommentDialog from '@/components/CommentsLayer/CommentDialog.vue';
@@ -53,7 +53,9 @@ const getSidebarCommentStyle = computed(() => {
 
 const isExpanded = ref(false);
 const getNumberOfConversations = computed(() => props.data.length);
-const handleClick = () => isExpanded.value = !isExpanded.value;
+const handleClick = () => {
+  isExpanded.value = !isExpanded.value;
+}
 const handleClickOutside = (e) => {
   const dialogClasses = ['group-collapsed', 'number-bubble'];
   if (dialogClasses.some((c) => e.target.classList.contains(c))) return;
@@ -103,6 +105,7 @@ const getVisibleComments = computed(() => {
 .group-collapsed {
   position: relative;
   display: inline;
+  width: 50px;
 }
 .comments-icon {
   font-size: 20px;
@@ -120,7 +123,6 @@ const getVisibleComments = computed(() => {
   pointer-events: none;
 }
 .number-bubble {
-  background-color: #1355FF;
   width: 20px;
   height: 20px;
   border-radius: 50%;
@@ -140,6 +142,7 @@ const getVisibleComments = computed(() => {
   position: absolute;
   border-radius: 12px;
   transition: background-color 250ms ease;
+  width: 51px;
 }
 .comments-icon:hover {
   background-color: #E2E9FB99;
@@ -148,5 +151,6 @@ const getVisibleComments = computed(() => {
   flex-direction: column;
   background-color: #EDEDED;
   z-index: 11;
+  width: 300px;
 }
 </style>
\ No newline at end of file
diff --git a/packages/superdoc/src/components/CommentsLayer/CommentsLayer.vue b/packages/superdoc/src/components/CommentsLayer/CommentsLayer.vue
index 277c3c2895..5ba286fc76 100644
--- a/packages/superdoc/src/components/CommentsLayer/CommentsLayer.vue
+++ b/packages/superdoc/src/components/CommentsLayer/CommentsLayer.vue
@@ -1,14 +1,20 @@
 <script setup>
-import { getCurrentInstance, computed, ref } from 'vue';
+import { getCurrentInstance, computed, ref, nextTick } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useCommentsStore } from '@/stores/comments-store';
 import { useSuperdocStore } from '@/stores/superdoc-store';
 import useConversation from './use-conversation';
+import useSelection from '@/helpers/use-selection';
 
 const superdocStore = useSuperdocStore();
 const commentsStore = useCommentsStore();
-const { COMMENT_EVENTS, getCommentLocation } = commentsStore;
-const { documentsWithConverations, activeComment } = storeToRefs(commentsStore);
+const { COMMENT_EVENTS } = commentsStore;
+const {
+  documentsWithConverations,
+  activeComment,
+  floatingCommentsOffset,
+  visibleConversations
+} = storeToRefs(commentsStore);
 const { documents } = storeToRefs(superdocStore);
 const { proxy } = getCurrentInstance();
 
@@ -51,26 +57,40 @@ const addCommentEntry = (selection) => {
   const newConvo = useConversation(params);
   activeComment.value = newConvo.conversationId;
 
+
   matchedDocument.conversations.push(newConvo);
   proxy.$superdoc.broadcastComments(COMMENT_EVENTS.NEW, newConvo.getValues());
 }
 
 const getStyle = (conversation) => {
+  const { selection } = conversation
+  const containerBounds = selection.getContainerLocation(props.parent)
   const placement = conversation.selection.selectionBounds;
-  const location = getCommentLocation(conversation.selection, props.parent);
-
   return {
     position: 'absolute',
-    top: location.top + 'px',
-    left: location.left + 'px',
+    top: placement.top + containerBounds.top + 'px',
+    left: placement.left + 'px',
     width: placement.right - placement.left + 'px',
     height: placement.bottom - placement.top + 'px',
   }
 }
 
-const handleHighlightClick = (conversation) => {
+const handleHighlightHover = (conversation, e) => {
+  floatingCommentsOffset.value = 0;
+}
+
+const setFloatingCommentOffset = (conversation, e) => {
+  const floatingConvo = visibleConversations.value.find((c) => c.id === conversation.conversationId);
+  const parentTop = props.parent.getBoundingClientRect().top;
+  const top = floatingConvo.position.top;
+  const eTop = e.target.getBoundingClientRect().top;
+  floatingCommentsOffset.value = top - eTop + parentTop;
+}
+
+const handleHighlightClick = (conversation, e) => {
   conversation.isFocused = true;
   activeComment.value = conversation.conversationId;
+  setFloatingCommentOffset(conversation, e);
   emit('highlight-click', conversation);
 }
 
@@ -92,7 +112,7 @@ defineExpose({
       <div
           v-for="conversation in getAllConversations"
           class="comment-anchor sd-highlight"
-          @click="handleHighlightClick(conversation)"
+          @click="(e) => handleHighlightClick(conversation, e)"
           :data-id="conversation.conversationId"
           :style="getStyle(conversation)"></div>
     </div>
@@ -101,7 +121,6 @@ defineExpose({
 
 <style scoped>
 .comment-doc {
-  background-color: red;
   position: relative;
 }
 .comments-layer {
@@ -113,12 +132,11 @@ defineExpose({
   z-index: 3;
   border-radius: 4px;
   transition: background-color 250ms ease;
-  pointer-events: auto;
 }
 .comment-anchor:hover {
   background-color: #FFD70099;
 }
 .comments-container {
-  pointer-events: none; 
+  /* pointer-events: none;  */
 }
 </style>
\ No newline at end of file
diff --git a/packages/superdoc/src/components/CommentsLayer/FloatingComments.vue b/packages/superdoc/src/components/CommentsLayer/FloatingComments.vue
new file mode 100644
index 0000000000..ba544905c0
--- /dev/null
+++ b/packages/superdoc/src/components/CommentsLayer/FloatingComments.vue
@@ -0,0 +1,152 @@
+<script setup>
+import { storeToRefs } from 'pinia';
+import { onMounted, ref, reactive, computed, watch, nextTick } from 'vue';
+import { useCommentsStore } from '@/stores/comments-store';
+import { useSuperdocStore } from '@/stores/superdoc-store';
+import useFloatingConverasation from './use-floating-conversation';
+import CommentDialog from '@/components/CommentsLayer/CommentDialog.vue';
+
+const superdocStore = useSuperdocStore();
+const commentsStore = useCommentsStore();
+const {
+  documentsWithConverations,
+  floatingCommentsOffset,
+  visibleConversations,
+  sortedConversations,
+  activeComment
+} = storeToRefs(commentsStore);
+const { user } = storeToRefs(superdocStore);
+
+const props = defineProps({
+  currentDocument: {
+    type: Object,
+    required: true,
+  },
+  parent: {
+    type: Object,
+    required: true,
+  },
+});
+
+const floatingCommentsContainer = ref(null);
+const handleDialogReady = (dialogId, elementRef) => {
+  const dialogIndex = sortedConversations.value.findIndex((c) => c.conversationId === dialogId);
+  if (dialogIndex === -1 || dialogIndex >= sortedConversations.length - 1) return;
+
+  const dialog = visibleConversations.value[dialogIndex]
+  if (!dialog) return;
+
+  const containerBounds = floatingCommentsContainer.value.getBoundingClientRect();
+  const selectionBounds = dialog.conversation.selection.getContainerLocation(props.parent)
+  const position = elementRef.value.getBoundingClientRect();
+  const selection = dialog.conversation.selection.selectionBounds;
+  const top = selection.top + position.top + selectionBounds.top - containerBounds.top;
+  const left = selection.left + position.left;
+  dialog.position = {
+    top,
+    left,
+    bottom: top + position.height,
+    right: left + position.width,
+  };
+
+  const resultingPosition = checkCollisions({ ...dialog.position }, dialogIndex);
+  if (dialogIndex > 0) dialog.position = resultingPosition;
+
+  nextTick(() => renderDialog(sortedConversations.value[dialogIndex + 1]));
+}
+
+const checkCollisions = (proposedPosition, dialogIndex) => {
+  const updatedPosition = { ...proposedPosition };
+  if (dialogIndex === 0) return updatedPosition;
+
+  const previousItem = visibleConversations.value[dialogIndex - 1];
+  const previousPosition = previousItem.position;
+  const topComparison = proposedPosition.top < previousPosition.bottom;
+  if (topComparison) {
+    const height = proposedPosition.bottom - proposedPosition.top;
+    updatedPosition.top = previousPosition.bottom + 2;
+    updatedPosition.bottom = updatedPosition.top + height;
+  }
+  return updatedPosition
+}
+
+const renderDialog = (data) => {
+  if (!data) return;
+
+  const nextConvo = useFloatingConverasation(data);
+  visibleConversations.value.push(nextConvo);
+}
+
+const sortByLocation = (a, b) => {
+  const pageA = a.selection.page;
+  const pageB = b.selection.page;
+  if (pageA !== pageB) return pageA - pageB;
+
+  const topB = b.selection.selectionBounds.top;
+  const topA = a.selection.selectionBounds.top;
+  return topA - topB;
+}
+
+const initialize = () => {
+  visibleConversations.value = [];
+  nextTick(() => initializeConvos());
+}
+
+const initializeConvos = () => {
+  const firstDoc = documentsWithConverations.value[0];
+  const conversations = [...firstDoc.conversations];
+  sortedConversations.value = conversations.sort(sortByLocation);
+  visibleConversations.value.push(useFloatingConverasation(sortedConversations.value[0]));
+
+  if (!activeComment.value) floatingCommentsOffset.value = 0;
+}
+
+const getPosition = (convo) => {
+  return {
+    top: convo.position.top + 'px',
+  }
+}
+
+const getFloatingSidebarStyle = computed(() => {
+  return {
+    marginTop: floatingCommentsOffset.value * (-1/2) + 'px',
+  }
+})
+
+watch(documentsWithConverations, (newVal) => {
+  if (!newVal.length) return;
+  initialize();
+})
+
+onMounted(() => {
+  initialize();
+});
+</script>
+
+<template>
+  <div class="section-wrapper" v-if="visibleConversations.length" ref="floatingCommentsContainer">
+    <div :style="getFloatingSidebarStyle" class="sidebar-container">
+      <CommentDialog
+            class="floating-comment"
+            v-for="floatingConversation in visibleConversations"
+            @ready="handleDialogReady"
+            @dialog-exit="initialize"
+            :style="getPosition(floatingConversation)"
+            :data="floatingConversation.conversation"
+            :current-document="currentDocument"
+            :user="user" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.section-wrapper {
+  position: relative;
+  min-height: 100%;
+  width: 300px;
+}
+.floating-comment {
+  position: absolute;
+  min-width: 300px;
+}
+</style>
\ No newline at end of file
diff --git a/packages/superdoc/src/components/CommentsLayer/use-floating-conversation.js b/packages/superdoc/src/components/CommentsLayer/use-floating-conversation.js
new file mode 100644
index 0000000000..e293d5166b
--- /dev/null
+++ b/packages/superdoc/src/components/CommentsLayer/use-floating-conversation.js
@@ -0,0 +1,18 @@
+import { ref, reactive } from 'vue';
+
+export default function useFloatingConveration(params) {
+  const id = params.conversationId;
+  const conversation = ref(params);
+  const position = reactive({
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+  });
+
+  return {
+    id,
+    conversation,
+    position
+  }
+}
diff --git a/packages/superdoc/src/components/HrbrFieldsLayer/HrbrFieldsLayer.vue b/packages/superdoc/src/components/HrbrFieldsLayer/HrbrFieldsLayer.vue
index 7d839f68c5..ef9dc47fe8 100644
--- a/packages/superdoc/src/components/HrbrFieldsLayer/HrbrFieldsLayer.vue
+++ b/packages/superdoc/src/components/HrbrFieldsLayer/HrbrFieldsLayer.vue
@@ -18,9 +18,18 @@ const props = defineProps({
 
 const getStyle = computed(() => (entry) => {
   const { coordinates, field } = entry;
+
+  // Adjust for padding
+  const adjustTypes = ['TEXTINPUT', 'SELECT']
+  if (adjustTypes.includes(field.fieldType)) {
+    const top = coordinates.top.split('px')[0];
+    const newTop = top - 13;
+    coordinates.top = `${newTop}px`;
+  }
+
   return {
     position: 'absolute',
-    field,
+    //field,
     ...coordinates,
   }
 });
@@ -40,10 +49,10 @@ const getAnnotationWithField = computed(() => {
 </script>
 
 <template>
-  <div>
-    <div v-for="entry in getAnnotationWithField" :style="getStyle(entry)">
+  <div class="main-container">
+    <div v-for="entry in getAnnotationWithField" :style="getStyle(entry)" class="field-container">
       <component
-          class="field-container"
+          class="field-component"
           :is="fieldComponentsMap[entry.field.fieldType]"
           :field="entry.field"
           :style-override="entry.style"
@@ -56,7 +65,7 @@ const getAnnotationWithField = computed(() => {
 <style scoped>
 .field-container {
   border-radius: 2px;
-  background-color: #EFD0F0;
+  background-color: #EFD0F0 !important;
   border: 2px solid #B015B3;
 }
 </style>
\ No newline at end of file
diff --git a/packages/superdoc/src/components/HrbrFieldsLayer/ParagraphField.vue b/packages/superdoc/src/components/HrbrFieldsLayer/ParagraphField.vue
index 402ad86d1a..d6f53a0b21 100644
--- a/packages/superdoc/src/components/HrbrFieldsLayer/ParagraphField.vue
+++ b/packages/superdoc/src/components/HrbrFieldsLayer/ParagraphField.vue
@@ -33,7 +33,6 @@ const getStyle = computed(() => {
 
 <style scoped>
   .paragraph-field {
-    overflow: hidden;
     margin: 0;
     padding: 1px;
   }
diff --git a/packages/superdoc/src/components/HrbrFieldsLayer/SelectField.vue b/packages/superdoc/src/components/HrbrFieldsLayer/SelectField.vue
index 0a1737947d..f1d3d74809 100644
--- a/packages/superdoc/src/components/HrbrFieldsLayer/SelectField.vue
+++ b/packages/superdoc/src/components/HrbrFieldsLayer/SelectField.vue
@@ -34,6 +34,5 @@ const getStyle = computed(() => {
 <style scoped>
 .select-container {
   padding: 1px;
-  margin-top: -13px;
 }
 </style>
diff --git a/packages/superdoc/src/components/HrbrFieldsLayer/TextField.vue b/packages/superdoc/src/components/HrbrFieldsLayer/TextField.vue
index 4c366eaca1..89acb1996c 100644
--- a/packages/superdoc/src/components/HrbrFieldsLayer/TextField.vue
+++ b/packages/superdoc/src/components/HrbrFieldsLayer/TextField.vue
@@ -46,7 +46,6 @@ const handleBlur = (e) => {
     width: 100%;
     border-radius: 2px;
     margin: 0;
-    margin-top: -13px;
     display: flex;
     align-items: center;
     padding: 1px;
diff --git a/packages/superdoc/src/components/PdfViewer/PdfViewer.vue b/packages/superdoc/src/components/PdfViewer/PdfViewer.vue
index 484d0727e2..ccbbec86a2 100644
--- a/packages/superdoc/src/components/PdfViewer/PdfViewer.vue
+++ b/packages/superdoc/src/components/PdfViewer/PdfViewer.vue
@@ -2,10 +2,9 @@
 import * as pdfjsLib from 'pdfjs-dist';
 import * as pdfjsViewer from 'pdfjs-dist/web/pdf_viewer';
 import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.min?raw';
-import { onMounted, ref } from 'vue';
+import { onMounted, ref, reactive } from 'vue';
 import useSelection from '@/helpers/use-selection';
 
-
 pdfjsLib.GlobalWorkerOptions.workerSrc = URL.createObjectURL(
   new Blob([pdfjsWorker], {
     type: 'application/javascript'
@@ -30,6 +29,7 @@ const props = defineProps({
 
 const id = props.documentData.id;
 const pdfData = props.documentData.data;
+const selectionBounds = reactive({})
 
 const getOriginalPageSize = (page) => {
   const viewport = page.getViewport({ scale: 1 });
@@ -82,55 +82,9 @@ async function renderPages(pdfDocument) {
       // Emit page information
       emit('page-loaded', id, i, containerBounds);
 
-      container.addEventListener('mousedown', (e) => {
-        const { target } = e;
-        if (target.tagName !== 'SPAN') {
-          isDragging = true;
-          mouseDrag.startX = e.offsetX;
-          mouseDrag.startY = e.offsetY;
-
-          enableTextLayer(container, false);
-        }
-      });
-
-      container.addEventListener('mousemove', (e) => {
-        if (!isDragging) return;
-        mouseDrag.endX = e.offsetX;
-        mouseDrag.endY = e.offsetY;
-        const boundingBox = {
-          left: mouseDrag.startX, 
-          top: mouseDrag.startY, 
-          right: mouseDrag.endX, 
-          bottom: mouseDrag.endY
-        }
-        const selection = useSelection({
-          selectionBounds: boundingBox,
-          page: container.dataset.pageNumber,
-          documentId: id,
-        });
-        emit('selection-drag', selection, e)
-      });
-
-      container.addEventListener('mouseup', (e) => {
-        enableTextLayer(container, true);
-        const boundingBox = getSelectedTextBoundingBox(container) || {};
-        if (isDragging) {
-          boundingBox.left = mouseDrag.startX;
-          boundingBox.top = mouseDrag.startY;
-          boundingBox.right = mouseDrag.endX;
-          boundingBox.bottom = mouseDrag.endY;
-        }
-        
-        const selection = useSelection({
-          selectionBounds: boundingBox,
-          page: container.dataset.pageNumber,
-          documentId: id,
-        });
-        
-        if (isDragging) emit('selection-drag-end', selection, containerBounds);
-        emit('selection-change', selection, container);
-        isDragging = false;
-      });
+      // Highlight event listeners
+      // container.addEventListener('touchstart', (e) => onTouchStart(e, container), { passive: false });
+      container.addEventListener('mousedown', (e) => onDragStart(e, container), { passive: false });
     }
 
     emit('ready', id, viewer)
@@ -160,7 +114,7 @@ function getSelectedTextBoundingBox(container) {
     bottom: firstRect.bottom,
     right: firstRect.right
   };
-  
+
   for (let i = 1; i < boundingRects.length; i++) {
     const rect = boundingRects[i];
     if (rect.width === 0 || rect.height === 0) {
@@ -185,10 +139,100 @@ function getSelectedTextBoundingBox(container) {
 }
 
 let isDragging = false;
-let mouseDrag = {
-  startX: 0, startY: 0, endX: 0, endY: 0
+
+const onDragStart = (e, container) => {
+  const { target } = e;
+  if (target.tagName !== 'SPAN') {
+    isDragging = true;
+    selectionBounds.left = e.offsetX;
+    selectionBounds.top = e.offsetY;
+    enableTextLayer(container, false);
+  }
+
+  const onDragMoveWrapper = (e) => onDragMove(e, container);
+  const onDragEndWrapper = (e) => {
+    document.removeEventListener('mouseup', onDragEndWrapper);
+    document.removeEventListener('mousemove', onDragMoveWrapper);
+    onDragEnd(e, container);
+  }
+
+  document.addEventListener('mouseup', onDragEndWrapper);
+  document.addEventListener('mousemove', onDragMoveWrapper);
+};
+
+const onDragEnd = (e, container) => {
+  let boundingBox = getSelectedTextBoundingBox(container) || {};
+  if (isDragging) boundingBox = selectionBounds;
+
+  const selection = useSelection({
+    selectionBounds: boundingBox,
+    page: container.dataset.pageNumber,
+    documentId: id,
+  });
+
+  const containerBounds = container.getBoundingClientRect();
+  if (isDragging) emit('selection-drag-end', selection, containerBounds);
+  emit('selection-change', selection, container);
+
+  isDragging = false;
+  enableTextLayer(container, true);
 }
 
+const onDragMove = (e, container) => {
+  if (!isDragging) return;
+  selectionBounds.right = e.offsetX;
+  selectionBounds.bottom = e.offsetY;
+  const selection = useSelection({
+    selectionBounds: selectionBounds,
+    page: container.dataset.pageNumber,
+    documentId: id,
+  });
+  emit('selection-drag', selection, e)
+}
+
+const onTouchStart = (e, container) => {
+  isDragging = true;
+
+  document.addEventListener('touchend', (e) => onTouchEnd(e, container));
+  document.addEventListener('touchmove', (e) => onTouchMove(e, container));
+
+  const touch = e.touches[0];
+  const containerBounds = container.getBoundingClientRect();
+  selectionBounds.left = touch.clientX;
+  selectionBounds.top = touch.clientY - containerBounds.top;
+};
+
+const onTouchMove = (e, container) => {
+  if (!isDragging || !container) return;
+
+  const touch = e.touches[0];
+  const containerBounds = container.getBoundingClientRect();
+  selectionBounds.right = touch.clientX - containerBounds.left;
+  selectionBounds.bottom = touch.clientY - containerBounds.top;
+  const selection = useSelection({
+    selectionBounds: selectionBounds,
+    page: container.dataset.pageNumber,
+    documentId: id,
+  });
+
+  emit('selection-drag', selection, e)
+};
+
+const onTouchEnd = (e, container) => {
+  isDragging = false;
+  document.removeEventListener('touchend', onTouchEnd);
+  document.removeEventListener('touchmove', onTouchMove);
+
+  const selection = useSelection({
+    selectionBounds: selectionBounds,
+    page: container.dataset.pageNumber,
+    documentId: id,
+  });
+  const containerBounds = container.getBoundingClientRect();
+  emit('selection-drag-end', selection, containerBounds);
+  emit('selection-change', selection, container);
+};
+
 onMounted(async () => {
   const doc = await loadPDF(pdfData);
 
@@ -199,12 +243,14 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div
-      class="superdoc-viewer"
-      ref="viewer"
-      id="viewerId"
-      @mousedown="onMouseDown"
-      @mousemove="onMouseMove">
+  <div>
+    <div
+        class="superdoc-viewer"
+        ref="viewer"
+        id="viewerId"
+        @mousedown="onMouseDown"
+        @mousemove="onMouseMove">
+    </div>
   </div>
 </template>
 
@@ -213,12 +259,13 @@ onMounted(async () => {
   @nested-import 'pdfjs-dist/web/pdf_viewer.css';
   
   position: relative;
+  display: flex;
+  flex-direction: column;
 
   .pdf-page {
-    position: relative;
     border: 1px solid #DFDFDF;
-    margin-bottom: var(--page-spacing);
-    width: fit-content;
+    margin: 20px 0;
+    position: relative;
   }
 
   .textLayer {
diff --git a/packages/superdoc/src/helpers/use-selection.js b/packages/superdoc/src/helpers/use-selection.js
index 35d766c16a..472ac9391b 100644
--- a/packages/superdoc/src/helpers/use-selection.js
+++ b/packages/superdoc/src/helpers/use-selection.js
@@ -16,8 +16,8 @@ export default function useSelection(params) {
     if (!container) return {};
     const containerBounds = container.getBoundingClientRect();
     return {
-      top: containerBounds.top - parentBounds.top,
-      left: containerBounds.left - parentBounds.left,
+      top: Number((containerBounds.top - parentBounds.top).toFixed(3)),
+      left: Number((containerBounds.left - parentBounds.left).toFixed(3)),
     }
   }
 
diff --git a/packages/superdoc/src/stores/comments-store.js b/packages/superdoc/src/stores/comments-store.js
index 37ca9fe0a6..b25e279cde 100644
--- a/packages/superdoc/src/stores/comments-store.js
+++ b/packages/superdoc/src/stores/comments-store.js
@@ -1,7 +1,8 @@
 import { defineStore } from 'pinia';
-import { ref, reactive, computed } from 'vue';
+import { ref, reactive, computed, unref } from 'vue';
 import { comments_module_events } from '@common/event-types.js';
 import { useSuperdocStore } from '@/stores/superdoc-store';
+import useConversation from '../components/CommentsLayer/use-conversation';
 
 export const useCommentsStore = defineStore('comments', () => {
   const superdocStore = useSuperdocStore();
@@ -19,6 +20,31 @@ export const useCommentsStore = defineStore('comments', () => {
   const overlappingComments = ref([]);
   const overlappedIds = new Set([]);
 
+  // Floating comments
+  const floatingCommentsOffset = ref(0);
+  const sortedConversations = ref([]);
+  const visibleConversations = ref([]);
+
+  const pendingComment = ref(null);
+  const getPendingComment = (selection) => {
+    return useConversation({
+      documentId: selection.documentId,
+      creatorEmail: superdocStore.user.email,
+      creatorName: superdocStore.user.name,
+      comments: [],
+      selection,
+    });
+  };
+
+  const showAddComment = () => {
+    // Need to fully unref the selection before applying it to the new object
+    const selection = { ...superdocStore.activeSelection };
+    selection.selectionBounds = { ...selection.selectionBounds };
+
+    pendingComment.value = getPendingComment(selection);
+    activeComment.value = pendingComment.value.conversationId;
+  };
+
   const hasOverlapId = (id) => overlappedIds.includes(id);
   const documentsWithConverations = computed(() => {
     return superdocStore.documents?.filter((d) => d.conversations.length > 0) || [];
@@ -110,7 +136,7 @@ export const useCommentsStore = defineStore('comments', () => {
           // Then this is a group
           const groupIndex = d.dataset.index;
           const group = overlappingComments.value[groupIndex];
-          group.unshift(dialog);
+          group?.unshift(dialog);
         } else {
           let dialogObject = dialog.doc?.conversations?.find((c) => c.conversationId === d.dataset.id);
           if (!dialogObject) dialogObject = doc.conversations.find((c) => c.conversationId === d.dataset.id);
@@ -143,6 +169,12 @@ export const useCommentsStore = defineStore('comments', () => {
     commentDialogs,
     overlappingComments,
     overlappedIds,
+    pendingComment,
+
+    // Floating comments
+    floatingCommentsOffset,
+    sortedConversations,
+    visibleConversations,
 
     // Getters
     getConfig,
@@ -155,6 +187,8 @@ export const useCommentsStore = defineStore('comments', () => {
     getCommentLocation,
     hasOverlapId,
     checkOverlaps,
-    initialCheck
+    initialCheck,
+    getPendingComment,
+    showAddComment,
   }
 });
\ No newline at end of file
diff --git a/packages/superdoc/src/stores/superdoc-store.js b/packages/superdoc/src/stores/superdoc-store.js
index 79e29fa1ac..abc1d76c50 100644
--- a/packages/superdoc/src/stores/superdoc-store.js
+++ b/packages/superdoc/src/stores/superdoc-store.js
@@ -13,6 +13,9 @@ export const useSuperdocStore = defineStore('superdoc', () => {
 
   const user = reactive({ name: null, email: null });
   const modules = reactive({});
+  
+  const activeSelection = ref(null);
+  const selectionPosition = ref(null);
 
   const init = (config) => {
     const { documents: docs, modules: configModules, user: configUser } = config;
@@ -70,7 +73,10 @@ export const useSuperdocStore = defineStore('superdoc', () => {
     documentContainers,
     documentBounds,
     pages,
-    
+
+    selectionPosition,
+    activeSelection,
+
     isReady,
 
     user,
diff --git a/packages/superdoc/src/style.css b/packages/superdoc/src/style.css
index 20afc70b01..d309830593 100644
--- a/packages/superdoc/src/style.css
+++ b/packages/superdoc/src/style.css
@@ -71,8 +71,9 @@ body {
 
 .sd-highlight {
   position: absolute;
-  border-radius: px;
+  border-radius: 3px;
   background-color: #FFD70044;
+  cursor: pointer;
 }
 .comment-box {
   width: 300px;
@@ -81,3 +82,6 @@ body {
   min-height: 100%;
   display: flex;
 }
+@media (max-width: 768px) {
+
+}
\ No newline at end of file

From 3a670bc106ae5d3c5292a2dcbb93b42e09b70da1 Mon Sep 17 00:00:00 2001
From: Nick Bernal <nick@harbourshare.com>
Date: Thu, 6 Jun 2024 20:17:36 -0700
Subject: [PATCH 2/7] Update highlight colors, positioning fixes, update to
 Alpha 12

---
 packages/superdoc/package.json                    |  2 +-
 packages/superdoc/src/Superdoc.vue                | 11 ++++++-----
 .../components/CommentsLayer/CommentDialog.vue    |  2 ++
 .../components/CommentsLayer/CommentsLayer.vue    |  9 ++-------
 .../components/CommentsLayer/FloatingComments.vue | 10 +++++++++-
 .../CommentsLayer/use-floating-conversation.js    |  4 +++-
 .../src/components/PdfViewer/PdfViewer.vue        |  6 ++++++
 packages/superdoc/src/style.css                   | 15 +++++++++++++--
 8 files changed, 42 insertions(+), 17 deletions(-)

diff --git a/packages/superdoc/package.json b/packages/superdoc/package.json
index 65a289014c..d4a2f59221 100644
--- a/packages/superdoc/package.json
+++ b/packages/superdoc/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@harbour-enterprises/superdoc",
   "type": "module",
-  "version": "1.0.0-alpha.10",
+  "version": "1.0.0-alpha.11",
   "files": [
     "dist"
   ],
diff --git a/packages/superdoc/src/Superdoc.vue b/packages/superdoc/src/Superdoc.vue
index 99272e1556..7b3e215849 100644
--- a/packages/superdoc/src/Superdoc.vue
+++ b/packages/superdoc/src/Superdoc.vue
@@ -119,7 +119,7 @@ const handleToolClick = (tool) => {
 }
 
 const handleDocumentMouseDown = (e) => {
-  selectionPosition.value = null;
+  selectionPosition.value = null;;
   document.removeEventListener('mousedown', handleDocumentMouseDown);
 }
 
@@ -143,17 +143,17 @@ onBeforeUnmount(() => {
 <div>
   <div class="superdoc">
     <div class="layers" ref="layers">
+
       <div
           v-if="toolsMenuPosition && !getConfig?.readOnly" 
           class="tools"
-          :style="toolsMenuPosition"
-          @click.stop.prevent>
+          :style="toolsMenuPosition">
         <i class="fas fa-comment-alt-lines" data-id="is-tool" @click.stop.prevent="handleToolClick('comments')"></i>
       </div>
 
       <div
           v-if="!getConfig?.readOnly && selectionPosition"
-          :style="selectionPosition" class="sd-highlight">
+          :style="selectionPosition" class="sd-highlight sd-initial-highlight">
       </div>
 
       <div class="document">
@@ -195,7 +195,7 @@ onBeforeUnmount(() => {
       </div>
     </div>
 
-    <div class="right-sidebar" v-if="documentsWithConverations.length && layers && isReady">
+    <div class="right-sidebar" v-if="(pendingComment || documentsWithConverations.length) && layers && isReady">
       <CommentDialog
           v-if="pendingComment"
           :data="pendingComment"
@@ -218,6 +218,7 @@ onBeforeUnmount(() => {
   width: 320px;
   padding: 0 10px;
   min-height: 100%;
+  position: relative;
 }
 
 /* General Styles */
diff --git a/packages/superdoc/src/components/CommentsLayer/CommentDialog.vue b/packages/superdoc/src/components/CommentsLayer/CommentDialog.vue
index 63afcbb3cb..edb1d13662 100644
--- a/packages/superdoc/src/components/CommentsLayer/CommentDialog.vue
+++ b/packages/superdoc/src/components/CommentsLayer/CommentDialog.vue
@@ -98,6 +98,8 @@ const getSidebarCommentStyle = computed(() => {
   if (!props.data.comments.length && currentElement.value) {
     const selectionBounds = props.data.selection.getContainerLocation(props.parent)
     const bounds = props.data.selection.selectionBounds;
+    const parentTop = props.parent.getBoundingClientRect().top;
+    const currentBounds = currentElement.value.getBoundingClientRect();
     style.top = bounds.top + selectionBounds.top + 'px';
     style.width = 300 + 'px';
   }
diff --git a/packages/superdoc/src/components/CommentsLayer/CommentsLayer.vue b/packages/superdoc/src/components/CommentsLayer/CommentsLayer.vue
index 5ba286fc76..4bf9057ea8 100644
--- a/packages/superdoc/src/components/CommentsLayer/CommentsLayer.vue
+++ b/packages/superdoc/src/components/CommentsLayer/CommentsLayer.vue
@@ -75,15 +75,12 @@ const getStyle = (conversation) => {
   }
 }
 
-const handleHighlightHover = (conversation, e) => {
-  floatingCommentsOffset.value = 0;
-}
-
 const setFloatingCommentOffset = (conversation, e) => {
   const floatingConvo = visibleConversations.value.find((c) => c.id === conversation.conversationId);
   const parentTop = props.parent.getBoundingClientRect().top;
   const top = floatingConvo.position.top;
   const eTop = e.target.getBoundingClientRect().top;
+
   floatingCommentsOffset.value = top - eTop + parentTop;
 }
 
@@ -110,6 +107,7 @@ defineExpose({
   <div class="comments-container" id="commentsContainer">
     <div class="comments-layer">
       <div
+          :class="{ 'sd-highlight-active': activeComment === conversation.conversationId }"
           v-for="conversation in getAllConversations"
           class="comment-anchor sd-highlight"
           @click="(e) => handleHighlightClick(conversation, e)"
@@ -133,9 +131,6 @@ defineExpose({
   border-radius: 4px;
   transition: background-color 250ms ease;
 }
-.comment-anchor:hover {
-  background-color: #FFD70099;
-}
 .comments-container {
   /* pointer-events: none;  */
 }
diff --git a/packages/superdoc/src/components/CommentsLayer/FloatingComments.vue b/packages/superdoc/src/components/CommentsLayer/FloatingComments.vue
index ba544905c0..d1b86b4d37 100644
--- a/packages/superdoc/src/components/CommentsLayer/FloatingComments.vue
+++ b/packages/superdoc/src/components/CommentsLayer/FloatingComments.vue
@@ -59,14 +59,22 @@ const checkCollisions = (proposedPosition, dialogIndex) => {
   const updatedPosition = { ...proposedPosition };
   if (dialogIndex === 0) return updatedPosition;
 
+  const currentItem = visibleConversations.value[dialogIndex];
   const previousItem = visibleConversations.value[dialogIndex - 1];
   const previousPosition = previousItem.position;
   const topComparison = proposedPosition.top < previousPosition.bottom;
+
   if (topComparison) {
     const height = proposedPosition.bottom - proposedPosition.top;
-    updatedPosition.top = previousPosition.bottom + 2;
+    const newTop = previousPosition.bottom + 2;
+    currentItem.offset = newTop - proposedPosition.top;
+    updatedPosition.top = newTop;
     updatedPosition.bottom = updatedPosition.top + height;
   }
+
+  if (currentItem.id === activeComment.value) {
+    floatingCommentsOffset.value += currentItem.offset;
+  }
   return updatedPosition
 }
 
diff --git a/packages/superdoc/src/components/CommentsLayer/use-floating-conversation.js b/packages/superdoc/src/components/CommentsLayer/use-floating-conversation.js
index e293d5166b..cef247ad8e 100644
--- a/packages/superdoc/src/components/CommentsLayer/use-floating-conversation.js
+++ b/packages/superdoc/src/components/CommentsLayer/use-floating-conversation.js
@@ -9,10 +9,12 @@ export default function useFloatingConveration(params) {
     right: 0,
     bottom: 0,
   });
+  const offset = ref(0);
 
   return {
     id,
     conversation,
-    position
+    position,
+    offset
   }
 }
diff --git a/packages/superdoc/src/components/PdfViewer/PdfViewer.vue b/packages/superdoc/src/components/PdfViewer/PdfViewer.vue
index ccbbec86a2..a43ebafe67 100644
--- a/packages/superdoc/src/components/PdfViewer/PdfViewer.vue
+++ b/packages/superdoc/src/components/PdfViewer/PdfViewer.vue
@@ -270,6 +270,12 @@ onMounted(async () => {
 
   .textLayer {
     z-index: 2;
+    position: absolute;
+  }
+
+  .textLayer ::selection {
+    background-color: #1355ff66;
+    mix-blend-mode: difference;
   }
 }
 </style>
diff --git a/packages/superdoc/src/style.css b/packages/superdoc/src/style.css
index d309830593..1c2ab9bd04 100644
--- a/packages/superdoc/src/style.css
+++ b/packages/superdoc/src/style.css
@@ -71,8 +71,19 @@ body {
 
 .sd-highlight {
   position: absolute;
-  border-radius: 3px;
-  background-color: #FFD70044;
+  border-radius: 33px;
+  background-color: #DDAF0955;
+  mix-blend-mode: multiply;
+  transition: background-color 250ms ease;
+}
+.sd-initial-highlight {
+  background-color: #1355ff7F;
+}
+.sd-highlight:hover {
+  background-color: #DDAF0999;
+}
+.sd-highlight-active {
+  background-color: #1355ff7F;
   cursor: pointer;
 }
 .comment-box {

From 28ed759733a18a0f5a3359385c0f228baa814587 Mon Sep 17 00:00:00 2001
From: Nick Bernal <nick@harbourshare.com>
Date: Thu, 6 Jun 2024 20:53:53 -0700
Subject: [PATCH 3/7] Minor tweeak in CommentDialog

---
 packages/superdoc/package.json                                  | 2 +-
 .../superdoc/src/components/CommentsLayer/CommentDialog.vue     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/superdoc/package.json b/packages/superdoc/package.json
index d4a2f59221..e5810f2de6 100644
--- a/packages/superdoc/package.json
+++ b/packages/superdoc/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@harbour-enterprises/superdoc",
   "type": "module",
-  "version": "1.0.0-alpha.11",
+  "version": "1.0.0-alpha.13",
   "files": [
     "dist"
   ],
diff --git a/packages/superdoc/src/components/CommentsLayer/CommentDialog.vue b/packages/superdoc/src/components/CommentsLayer/CommentDialog.vue
index edb1d13662..6807255cea 100644
--- a/packages/superdoc/src/components/CommentsLayer/CommentDialog.vue
+++ b/packages/superdoc/src/components/CommentsLayer/CommentDialog.vue
@@ -51,7 +51,7 @@ const addComment = () => {
   });
 
   // If this conversation is pending addition, add to the document first
-  if (pendingComment.value.conversationId === props.data.conversationId) {
+  if (pendingComment.value && pendingComment.value.conversationId === props.data.conversationId) {
     const newConversation = { ...pendingComment.value }
 
      // Remove the pending comment

From b5a6fc4e1917dfc7afdc67f93f6d7dcdcde354e7 Mon Sep 17 00:00:00 2001
From: Nick Bernal <nick@harbourshare.com>
Date: Thu, 6 Jun 2024 22:22:57 -0700
Subject: [PATCH 4/7] Positioning adjustments for floating comments and
 floating highlights after testing in webapp, added comments to
 FloatingComments.vue

---
 packages/superdoc/package.json                |   2 +-
 packages/superdoc/src/Superdoc.vue            | 125 +++++++++---------
 .../CommentsLayer/CommentDialog.vue           |   4 +-
 .../CommentsLayer/CommentsLayer.vue           |   3 +-
 .../CommentsLayer/FloatingComments.vue        |  60 ++++++---
 .../src/components/PdfViewer/PdfViewer.vue    |   2 +-
 .../superdoc/src/helpers/use-selection.js     |   1 +
 packages/superdoc/src/style.css               |   2 +
 8 files changed, 109 insertions(+), 90 deletions(-)

diff --git a/packages/superdoc/package.json b/packages/superdoc/package.json
index e5810f2de6..bd762c5405 100644
--- a/packages/superdoc/package.json
+++ b/packages/superdoc/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@harbour-enterprises/superdoc",
   "type": "module",
-  "version": "1.0.0-alpha.13",
+  "version": "1.0.0-alpha.14",
   "files": [
     "dist"
   ],
diff --git a/packages/superdoc/src/Superdoc.vue b/packages/superdoc/src/Superdoc.vue
index 7b3e215849..08f2991483 100644
--- a/packages/superdoc/src/Superdoc.vue
+++ b/packages/superdoc/src/Superdoc.vue
@@ -140,75 +140,73 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-<div>
-  <div class="superdoc">
-    <div class="layers" ref="layers">
-
-      <div
-          v-if="toolsMenuPosition && !getConfig?.readOnly" 
-          class="tools"
-          :style="toolsMenuPosition">
-        <i class="fas fa-comment-alt-lines" data-id="is-tool" @click.stop.prevent="handleToolClick('comments')"></i>
-      </div>
-
-      <div
-          v-if="!getConfig?.readOnly && selectionPosition"
-          :style="selectionPosition" class="sd-highlight sd-initial-highlight">
-      </div>
-
-      <div class="document">
-        <!-- Fields layer -->
-        <HrbrFieldsLayer
-            v-if="'hrbr-fields' in modules && layers"
-            :fields="modules['hrbr-fields']"
-            class="comments-layer"
-            style="z-index: 5; background-color: blue;"
-            ref="hrbrFieldsLayer" />
-
-        <!-- On-document comments layer -->
-        <CommentsLayer
-            class="comments-layer"
-            v-if="isReady && 'comments' in modules && layers"
-            style="z-index: 3;"
-            ref="commentsLayer"
-            :parent="layers"
-            :user="user"
-            @highlight-click="handleHighlightClick" />
-
-        <div class="sub-document" v-for="doc in documents" ref="documentContainers">
-          <!-- PDF renderer -->
-          <PdfViewer
-              v-if="doc.type === 'pdf'"
-              :document-data="doc"
-              @selection-change="handleSelectionChange"
-              @selection-drag="handleSelectionDrag"
-              @selection-drag-end="handleSelectionDragEnd"
-              @ready="handlePdfReady" 
-              @page-loaded="handlePageReady" />
-
-          <!-- DOCX Renderer -->
-          <DocumentEditor
-              v-if="doc.type === 'docx'"
-              :document-data="doc"
-              @ready="handlePdfReady" />
-        </div>
-      </div>
+<div class="superdoc">
+  <div class="layers" ref="layers">
+
+    <div
+        v-if="toolsMenuPosition && !getConfig?.readOnly" 
+        class="tools"
+        :style="toolsMenuPosition">
+      <i class="fas fa-comment-alt-lines" data-id="is-tool" @click.stop.prevent="handleToolClick('comments')"></i>
     </div>
 
-    <div class="right-sidebar" v-if="(pendingComment || documentsWithConverations.length) && layers && isReady">
-      <CommentDialog
-          v-if="pendingComment"
-          :data="pendingComment"
-          :current-document="getDocument(pendingComment.documentId)"
-          :user="user" 
-          :parent="layers" />
+    <div
+        v-if="!getConfig?.readOnly && selectionPosition"
+        :style="selectionPosition" class="sd-highlight sd-initial-highlight">
+    </div>
 
-      <FloatingComments
-          v-for="doc in documentsWithConverations"
+    <div class="document">
+      <!-- Fields layer -->
+      <HrbrFieldsLayer
+          v-if="'hrbr-fields' in modules && layers"
+          :fields="modules['hrbr-fields']"
+          class="comments-layer"
+          style="z-index: 5; background-color: blue;"
+          ref="hrbrFieldsLayer" />
+
+      <!-- On-document comments layer -->
+      <CommentsLayer
+          class="comments-layer"
+          v-if="isReady && 'comments' in modules && layers"
+          style="z-index: 3;"
+          ref="commentsLayer"
           :parent="layers"
-          :current-document="doc" />
+          :user="user"
+          @highlight-click="handleHighlightClick" />
+
+      <div class="sub-document" v-for="doc in documents" ref="documentContainers">
+        <!-- PDF renderer -->
+        <PdfViewer
+            v-if="doc.type === 'pdf'"
+            :document-data="doc"
+            @selection-change="handleSelectionChange"
+            @selection-drag="handleSelectionDrag"
+            @selection-drag-end="handleSelectionDragEnd"
+            @ready="handlePdfReady" 
+            @page-loaded="handlePageReady" />
+
+        <!-- DOCX Renderer -->
+        <DocumentEditor
+            v-if="doc.type === 'docx'"
+            :document-data="doc"
+            @ready="handlePdfReady" />
+      </div>
     </div>
   </div>
+
+  <div class="right-sidebar" v-if="(pendingComment || documentsWithConverations.length) && layers && isReady">
+    <CommentDialog
+        v-if="pendingComment"
+        :data="pendingComment"
+        :current-document="getDocument(pendingComment.documentId)"
+        :user="user" 
+        :parent="layers" />
+
+    <FloatingComments
+        v-for="doc in documentsWithConverations"
+        :parent="layers"
+        :current-document="doc" />
+  </div>
 </div>
 </template>
 
@@ -248,7 +246,6 @@ onBeforeUnmount(() => {
 }
 .layers {
   position: relative;
-  display: inline-block;
 }
 
 /* Document Styles */
diff --git a/packages/superdoc/src/components/CommentsLayer/CommentDialog.vue b/packages/superdoc/src/components/CommentsLayer/CommentDialog.vue
index 6807255cea..555e81a0f4 100644
--- a/packages/superdoc/src/components/CommentsLayer/CommentDialog.vue
+++ b/packages/superdoc/src/components/CommentsLayer/CommentDialog.vue
@@ -9,7 +9,7 @@ import Avatar from '@/components/general/Avatar.vue';
 const superdocStore = useSuperdocStore();
 const commentsStore = useCommentsStore();
 const { COMMENT_EVENTS } = commentsStore;
-const { getConfig, activeComment, pendingComment } = storeToRefs(commentsStore);
+const { getConfig, activeComment, pendingComment, floatingCommentsOffset } = storeToRefs(commentsStore);
 const { areDocumentsReady } = superdocStore;
 const { selectionPosition } = storeToRefs(superdocStore);
 const { proxy } = getCurrentInstance();
@@ -117,6 +117,8 @@ const cleanConversations = () => {
 
 const handleClickOutside = (e) => {
   if (activeComment.value === props.data.conversationId) {
+    floatingCommentsOffset.value = 0;
+
     emit('dialog-exit');
     if (e.target.dataset.id) activeComment.value = e.target.dataset.id;
     else activeComment.value = null;
diff --git a/packages/superdoc/src/components/CommentsLayer/CommentsLayer.vue b/packages/superdoc/src/components/CommentsLayer/CommentsLayer.vue
index 4bf9057ea8..26c9918400 100644
--- a/packages/superdoc/src/components/CommentsLayer/CommentsLayer.vue
+++ b/packages/superdoc/src/components/CommentsLayer/CommentsLayer.vue
@@ -66,9 +66,10 @@ const getStyle = (conversation) => {
   const { selection } = conversation
   const containerBounds = selection.getContainerLocation(props.parent)
   const placement = conversation.selection.selectionBounds;
+  const top = parseFloat(placement.top) + containerBounds.top;
   return {
     position: 'absolute',
-    top: placement.top + containerBounds.top + 'px',
+    top: top + 'px',
     left: placement.left + 'px',
     width: placement.right - placement.left + 'px',
     height: placement.bottom - placement.top + 'px',
diff --git a/packages/superdoc/src/components/CommentsLayer/FloatingComments.vue b/packages/superdoc/src/components/CommentsLayer/FloatingComments.vue
index d1b86b4d37..0c8599a409 100644
--- a/packages/superdoc/src/components/CommentsLayer/FloatingComments.vue
+++ b/packages/superdoc/src/components/CommentsLayer/FloatingComments.vue
@@ -28,20 +28,33 @@ const props = defineProps({
   },
 });
 
+/**
+ * Floating comments layer
+ * 
+ * This component works by first sorting through all comments in order top-to-bottom
+ * Then rendering each comment one at a time, checking for potential comment overlaps as each
+ * new comment is added.
+ */
+
 const floatingCommentsContainer = ref(null);
+
 const handleDialogReady = (dialogId, elementRef) => {
+  // Called when a dialog has mounted
+  // We must check for collisions against the previous dialog and adjust location if necessary
+
   const dialogIndex = sortedConversations.value.findIndex((c) => c.conversationId === dialogId);
   if (dialogIndex === -1 || dialogIndex >= sortedConversations.length - 1) return;
 
+  // This is our current comment
   const dialog = visibleConversations.value[dialogIndex]
   if (!dialog) return;
 
-  const containerBounds = floatingCommentsContainer.value.getBoundingClientRect();
+ // Need to calculate the exact position of the dialog
   const selectionBounds = dialog.conversation.selection.getContainerLocation(props.parent)
   const position = elementRef.value.getBoundingClientRect();
   const selection = dialog.conversation.selection.selectionBounds;
-  const top = selection.top + position.top + selectionBounds.top - containerBounds.top;
-  const left = selection.left + position.left;
+  const top = parseFloat(selection.top) + selectionBounds.top;
+  const left = parseFloat(selection.left) + position.left;
   dialog.position = {
     top,
     left,
@@ -49,13 +62,18 @@ const handleDialogReady = (dialogId, elementRef) => {
     right: left + position.width,
   };
 
+  // Check for collisions
   const resultingPosition = checkCollisions({ ...dialog.position }, dialogIndex);
   if (dialogIndex > 0) dialog.position = resultingPosition;
 
+  // Render the next dialog
   nextTick(() => renderDialog(sortedConversations.value[dialogIndex + 1]));
 }
 
 const checkCollisions = (proposedPosition, dialogIndex) => {
+  // Checks for collisions between the current dialog position and the previous one 
+  // Important: this only works if the list is sorted to begin with
+
   const updatedPosition = { ...proposedPosition };
   if (dialogIndex === 0) return updatedPosition;
 
@@ -66,7 +84,7 @@ const checkCollisions = (proposedPosition, dialogIndex) => {
 
   if (topComparison) {
     const height = proposedPosition.bottom - proposedPosition.top;
-    const newTop = previousPosition.bottom + 2;
+    const newTop = previousPosition.bottom + 5;
     currentItem.offset = newTop - proposedPosition.top;
     updatedPosition.top = newTop;
     updatedPosition.bottom = updatedPosition.top + height;
@@ -80,12 +98,13 @@ const checkCollisions = (proposedPosition, dialogIndex) => {
 
 const renderDialog = (data) => {
   if (!data) return;
-
   const nextConvo = useFloatingConverasation(data);
   visibleConversations.value.push(nextConvo);
 }
 
 const sortByLocation = (a, b) => {
+  // Sort comments by page and by position first
+
   const pageA = a.selection.page;
   const pageB = b.selection.page;
   if (pageA !== pageB) return pageA - pageB;
@@ -105,11 +124,9 @@ const initializeConvos = () => {
   const conversations = [...firstDoc.conversations];
   sortedConversations.value = conversations.sort(sortByLocation);
   visibleConversations.value.push(useFloatingConverasation(sortedConversations.value[0]));
-
-  if (!activeComment.value) floatingCommentsOffset.value = 0;
 }
 
-const getPosition = (convo) => {
+const getCommentPosition = (convo) => {
   return {
     top: convo.position.top + 'px',
   }
@@ -121,28 +138,27 @@ const getFloatingSidebarStyle = computed(() => {
   }
 })
 
-watch(documentsWithConverations, (newVal) => {
-  if (!newVal.length) return;
-  initialize();
-})
-
+// Update the floating comments when the conversations change
+watch(documentsWithConverations, (newVal) => (newVal.length && initialize()));
 onMounted(() => {
   initialize();
 });
+
 </script>
 
 <template>
   <div class="section-wrapper" v-if="visibleConversations.length" ref="floatingCommentsContainer">
     <div :style="getFloatingSidebarStyle" class="sidebar-container">
-      <CommentDialog
-            class="floating-comment"
-            v-for="floatingConversation in visibleConversations"
-            @ready="handleDialogReady"
-            @dialog-exit="initialize"
-            :style="getPosition(floatingConversation)"
-            :data="floatingConversation.conversation"
-            :current-document="currentDocument"
-            :user="user" />
+      <div v-for="floatingConversation in visibleConversations">
+        <CommentDialog
+              class="floating-comment"
+              @ready="handleDialogReady"
+              @dialog-exit="initialize"
+              :style="getCommentPosition(floatingConversation)"
+              :data="floatingConversation.conversation"
+              :current-document="currentDocument"
+              :user="user" />
+        </div>
     </div>
   </div>
 </template>
diff --git a/packages/superdoc/src/components/PdfViewer/PdfViewer.vue b/packages/superdoc/src/components/PdfViewer/PdfViewer.vue
index a43ebafe67..20ecc4a65f 100644
--- a/packages/superdoc/src/components/PdfViewer/PdfViewer.vue
+++ b/packages/superdoc/src/components/PdfViewer/PdfViewer.vue
@@ -264,7 +264,7 @@ onMounted(async () => {
 
   .pdf-page {
     border: 1px solid #DFDFDF;
-    margin: 20px 0;
+    margin: 0 0 20px 0;
     position: relative;
   }
 
diff --git a/packages/superdoc/src/helpers/use-selection.js b/packages/superdoc/src/helpers/use-selection.js
index 472ac9391b..6f51edaeaf 100644
--- a/packages/superdoc/src/helpers/use-selection.js
+++ b/packages/superdoc/src/helpers/use-selection.js
@@ -15,6 +15,7 @@ export default function useSelection(params) {
 
     if (!container) return {};
     const containerBounds = container.getBoundingClientRect();
+
     return {
       top: Number((containerBounds.top - parentBounds.top).toFixed(3)),
       left: Number((containerBounds.left - parentBounds.left).toFixed(3)),
diff --git a/packages/superdoc/src/style.css b/packages/superdoc/src/style.css
index 1c2ab9bd04..ec0a73dd2a 100644
--- a/packages/superdoc/src/style.css
+++ b/packages/superdoc/src/style.css
@@ -92,6 +92,8 @@ body {
 .superdoc {
   min-height: 100%;
   display: flex;
+  margin: 0;
+  padding: 0;
 }
 @media (max-width: 768px) {
 

From e496e7aeb3afc60684195ca86527ecb51940ebdf Mon Sep 17 00:00:00 2001
From: Nick Bernal <nick@harbourshare.com>
Date: Fri, 7 Jun 2024 12:51:12 -0700
Subject: [PATCH 5/7] Minor tweaks to fix text selection pending highlight

---
 packages/superdoc/package.json                |  2 +-
 packages/superdoc/src/Superdoc.vue            | 30 +++++++++++++------
 .../CommentsLayer/CommentDialog.vue           |  1 +
 3 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/packages/superdoc/package.json b/packages/superdoc/package.json
index bd762c5405..faca36400f 100644
--- a/packages/superdoc/package.json
+++ b/packages/superdoc/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@harbour-enterprises/superdoc",
   "type": "module",
-  "version": "1.0.0-alpha.14",
+  "version": "1.0.0-alpha.15",
   "files": [
     "dist"
   ],
diff --git a/packages/superdoc/src/Superdoc.vue b/packages/superdoc/src/Superdoc.vue
index 08f2991483..bf68d75fdb 100644
--- a/packages/superdoc/src/Superdoc.vue
+++ b/packages/superdoc/src/Superdoc.vue
@@ -57,7 +57,8 @@ const handlePdfReady = (documentId, container) => {
 // Document selections
 const handleSelectionChange = (selection) => {
   if (!selection.selectionBounds) return;
-  activeSelection.value = selection;
+  
+  activeSelection.value = selection
 
   // Place the tools menu at the level of the selection
   const containerBounds = selection.getContainerLocation(layers.value)
@@ -74,11 +75,11 @@ const handleSelectionChange = (selection) => {
   };
 }
 
-const handleSelectionDrag = (selection, e) => {
-  if (!selection.selectionBounds) return;
-  const containerBounds = selection.getContainerLocation(layers.value)
+const setSelectionPosition = (selection) => {
+  activeSelection.value = selection;
 
-  // Place the tools menu at the level of the selection
+  const containerBounds = selection.getContainerLocation(layers.value)
+  
   let left = selection.selectionBounds.left;
   let top = selection.selectionBounds.top + containerBounds.top;
 
@@ -98,8 +99,13 @@ const handleSelectionDrag = (selection, e) => {
     height: Math.abs(selection.selectionBounds.bottom - selection.selectionBounds.top) + 'px',
     borderRadius: '4px',
   };
-  activeSelection.value = selection;
 }
+  
+const handleSelectionDrag = (selection, e) => {
+  if (!selection.selectionBounds) return;
+  setSelectionPosition(selection);
+}
+
 const handleSelectionDragEnd = () => {
   if (!selectionPosition.value) return;
   selectionPosition.value.border = '1px solid transparent';
@@ -111,7 +117,8 @@ const handleToolClick = (tool) => {
   }
 
   if (tool in toolOptions) {
-    toolOptions[tool](activeSelection.value, selectionPosition.value)
+    setSelectionPosition(activeSelection.value);
+    toolOptions[tool](activeSelection.value, selectionPosition.value);
   }
 
   activeSelection.value = null;
@@ -119,14 +126,18 @@ const handleToolClick = (tool) => {
 }
 
 const handleDocumentMouseDown = (e) => {
+  if (pendingComment.value) return;
   selectionPosition.value = null;;
-  document.removeEventListener('mousedown', handleDocumentMouseDown);
 }
 
 const handleHighlightClick = () => {
   toolsMenuPosition.value = null;
 }
 
+const cancelPendingComment = () => {
+  selectionPosition.value = null;
+}
+
 onMounted(() => {
   if ('comments' in modules && !modules.comments.readOnly) {
     document.addEventListener('mousedown', handleDocumentMouseDown);
@@ -200,7 +211,8 @@ onBeforeUnmount(() => {
         :data="pendingComment"
         :current-document="getDocument(pendingComment.documentId)"
         :user="user" 
-        :parent="layers" />
+        :parent="layers"
+        v-click-outside="cancelPendingComment" />
 
     <FloatingComments
         v-for="doc in documentsWithConverations"
diff --git a/packages/superdoc/src/components/CommentsLayer/CommentDialog.vue b/packages/superdoc/src/components/CommentsLayer/CommentDialog.vue
index 555e81a0f4..9fbb158e7d 100644
--- a/packages/superdoc/src/components/CommentsLayer/CommentDialog.vue
+++ b/packages/superdoc/src/components/CommentsLayer/CommentDialog.vue
@@ -109,6 +109,7 @@ const getSidebarCommentStyle = computed(() => {
 
 const cleanConversations = () => {
   if (props.data.comments.length) return;
+  if (pendingComment.value) selectionPosition.value = null;
   const id = props.data.conversationId;
   pendingComment.value = null;
   props.currentDocument.removeConversation(id);

From 622b17a4837ba9ed4822c6b5409b0e7396768956 Mon Sep 17 00:00:00 2001
From: Nick Bernal <nick@harbourshare.com>
Date: Fri, 7 Jun 2024 13:30:49 -0700
Subject: [PATCH 6/7] Adjustment for vertival alignment of clustered comments

---
 packages/superdoc/package.json                    |  2 +-
 .../components/CommentsLayer/CommentDialog.vue    | 15 +++++++++++++++
 .../components/CommentsLayer/CommentsLayer.vue    |  4 +++-
 .../components/CommentsLayer/FloatingComments.vue | 14 ++++++++++++++
 4 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/packages/superdoc/package.json b/packages/superdoc/package.json
index faca36400f..df1c1e3b52 100644
--- a/packages/superdoc/package.json
+++ b/packages/superdoc/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@harbour-enterprises/superdoc",
   "type": "module",
-  "version": "1.0.0-alpha.15",
+  "version": "1.0.0-alpha.16",
   "files": [
     "dist"
   ],
diff --git a/packages/superdoc/src/components/CommentsLayer/CommentDialog.vue b/packages/superdoc/src/components/CommentsLayer/CommentDialog.vue
index 9fbb158e7d..ea1574854f 100644
--- a/packages/superdoc/src/components/CommentsLayer/CommentDialog.vue
+++ b/packages/superdoc/src/components/CommentsLayer/CommentDialog.vue
@@ -3,6 +3,7 @@ import { computed, toRefs, ref, getCurrentInstance, onMounted } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useCommentsStore } from '@/stores/comments-store';
 import { useSuperdocStore } from '@/stores/superdoc-store';
+import useSelection from '@/helpers/use-selection';
 import useComment from '@/components/CommentsLayer/use-comment';
 import Avatar from '@/components/general/Avatar.vue';
 
@@ -54,6 +55,20 @@ const addComment = () => {
   if (pendingComment.value && pendingComment.value.conversationId === props.data.conversationId) {
     const newConversation = { ...pendingComment.value }
 
+    const selection = pendingComment.value.selection.getValues();
+    const bounds = selection.selectionBounds;
+    if (bounds.top > bounds.bottom) {
+      const temp = bounds.top;
+      bounds.top = bounds.bottom;
+      bounds.bottom = temp;
+    } 
+    if (bounds.left > bounds.right) {
+      const temp = bounds.left;
+      bounds.left = bounds.right;
+      bounds.right = temp;
+    }
+    newConversation.selection = useSelection(selection)
+
      // Remove the pending comment
      pendingComment.value = null;
     
diff --git a/packages/superdoc/src/components/CommentsLayer/CommentsLayer.vue b/packages/superdoc/src/components/CommentsLayer/CommentsLayer.vue
index 26c9918400..9268a3659a 100644
--- a/packages/superdoc/src/components/CommentsLayer/CommentsLayer.vue
+++ b/packages/superdoc/src/components/CommentsLayer/CommentsLayer.vue
@@ -78,11 +78,13 @@ const getStyle = (conversation) => {
 
 const setFloatingCommentOffset = (conversation, e) => {
   const floatingConvo = visibleConversations.value.find((c) => c.id === conversation.conversationId);
+  const convoTop = conversation.selection.getContainerLocation(props.parent).top;
+
   const parentTop = props.parent.getBoundingClientRect().top;
   const top = floatingConvo.position.top;
   const eTop = e.target.getBoundingClientRect().top;
 
-  floatingCommentsOffset.value = top - eTop + parentTop;
+  floatingCommentsOffset.value = conversation.selection.selectionBounds.top; //top - eTop + parentTop;
 }
 
 const handleHighlightClick = (conversation, e) => {
diff --git a/packages/superdoc/src/components/CommentsLayer/FloatingComments.vue b/packages/superdoc/src/components/CommentsLayer/FloatingComments.vue
index 0c8599a409..4a38eac636 100644
--- a/packages/superdoc/src/components/CommentsLayer/FloatingComments.vue
+++ b/packages/superdoc/src/components/CommentsLayer/FloatingComments.vue
@@ -36,6 +36,7 @@ const props = defineProps({
  * new comment is added.
  */
 
+let offset = 0;
 const floatingCommentsContainer = ref(null);
 
 const handleDialogReady = (dialogId, elementRef) => {
@@ -82,6 +83,7 @@ const checkCollisions = (proposedPosition, dialogIndex) => {
   const previousPosition = previousItem.position;
   const topComparison = proposedPosition.top < previousPosition.bottom;
 
+  // If we have a collision, adjust the top and bottom positions
   if (topComparison) {
     const height = proposedPosition.bottom - proposedPosition.top;
     const newTop = previousPosition.bottom + 5;
@@ -92,6 +94,10 @@ const checkCollisions = (proposedPosition, dialogIndex) => {
 
   if (currentItem.id === activeComment.value) {
     floatingCommentsOffset.value += currentItem.offset;
+    offset = updatedPosition.top;
+    
+    const diff = updatedPosition.top - proposedPosition.top;
+    floatingCommentsOffset.value += diff;
   }
   return updatedPosition
 }
@@ -140,6 +146,14 @@ const getFloatingSidebarStyle = computed(() => {
 
 // Update the floating comments when the conversations change
 watch(documentsWithConverations, (newVal) => (newVal.length && initialize()));
+watch(activeComment, (newVal) => {
+  setTimeout(() => {
+    if (!activeComment.value) {
+      floatingCommentsOffset.value = 0;
+      initialize();
+    }
+  })
+});
 onMounted(() => {
   initialize();
 });

From df95ac554ee764c09259654a422d099bcc50e51b Mon Sep 17 00:00:00 2001
From: Nick Bernal <nick@harbourshare.com>
Date: Fri, 7 Jun 2024 13:33:09 -0700
Subject: [PATCH 7/7] Updated come to palpha 16 - fixing clustered comments
 vertical alignment