#986 fix space takeup for url link icon

src/App.css

@@ -563,16 +563,28 @@ This prevents table cols being rendered as multiline content, which causes inaac
   user-select: none;
   /* offset parent container (.child) padding-left since position:absolute changes the width calculation; */
   box-sizing: border-box;
+  width: 100%;
 }
 
 .editable-annotation {
   display: inline-block;
-  width: 100%;
+  /* Use max width to make sure the .editable-annotation takes up exact same space as parent  */
+  max-width: 100%;
   padding: 0 0.333em;
   box-sizing: border-box;
+
+  /*
+    Since .editable-annotation-text is display: inline the margin only gets applied to its first line, and not later lines.
+    To make sure all lines are aligned need to apply the margin here, and remove margin from the .editable-annotation-text
+   */
+  margin: -0.5px 0 0 calc(1em - 18px);
 }
 
 .thought-annotation a {
+  /* set height of this a tag to 1em to make sure the a tag doesn't affect .thought annotation's line height */
+  height: 1em;
+  display: inline-block;
+  overflow: hidden;
   position: relative;
   z-index: var(--z-index-thought-annotation-link);
 }
@@ -618,10 +630,13 @@ This prevents table cols being rendered as multiline content, which causes inaac
   --min-thought-height: 1.9em;
 }
 
+.child .editable {
+    /* slide editable up so that it overlaps with the previous thought, ensuring there is no dead click zone from clip-path */
+    margin: -0.5px 0 0 calc(1em - 18px);
+}
+
 .child .editable,
 .editable-annotation-text {
-  /* slide editable up so that it overlaps with the previous thought, ensuring there is no dead click zone from clip-path */
-  margin: -0.5px 0 0 calc(1em - 18px);
   /* create stacking order to position above thought-annotation so that function background color does not mask thought */
   position: relative;
   /* Prevent the selection from being incorrectly set to the beginning of the thought when the top edge is clicked, and the end of the thought when the bottom edge is clicked. Instead, we want the usual behavior of the selection being placed near the click. */
@@ -630,6 +645,7 @@ This prevents table cols being rendered as multiline content, which causes inaac
   min-height: var(--min-thought-height);
 }
 
+
 /** Assign annotation height on single line truncated url */
 .single-line .thought {
   /**
@@ -1814,6 +1830,12 @@ h1 .num-contexts {
   overflow: hidden;
   white-space: nowrap;
   max-width: 100%;
+  /*
+    vertical-align: top; - This fixes the height difference problem of .thought-annotation and .thought
+    Here is the reference to the reason.
+    https://stackoverflow.com/questions/20310690/overflowhidden-on-inline-block-adds-height-to-parent
+   */
+  vertical-align: top;
 }
 
 .single-line .thought {
@@ -1825,13 +1847,9 @@ h1 .num-contexts {
   max-width: calc(100% - 2em);
 }
 
-/* Fix a tag position after overflow:hidden applined on span tag. */
-.single-line .thought-annotation .editable-annotation-text + a {
-  position: absolute;
-}
-.single-line .thought-annotation .editable-annotation-text + a + .superscript-container {
-  position: absolute;
-  right: -22px;
+.single-line .thought-annotation .editable-annotation {
+  /* make url icon on the same line when singline is applied */
+  white-space: nowrap;
 }
 
 .multiline.multiline.multiline.multiline.editable-annotation {

src/components/VirtualThought.tsx

@@ -127,7 +127,12 @@ const VirtualThought = ({
     const autofocusNew = calculateAutofocus(store.getState(), path)
     const isVisibleNew = autofocusNew === 'show' || autofocusNew === 'dim'
     if (!ref.current) return
-    const heightNew = ref.current.getBoundingClientRect().height
+
+    // Need to grab max height between .thought and .thought-annotation since the annotation height might be bigger (due to wrapping link icon).
+    const heightNew = Math.max(
+      ref.current.getBoundingClientRect().height,
+      ref.current.querySelector('.thought-annotation')?.getBoundingClientRect().height || 0,
+    )
     const widthNew = ref.current.querySelector('.editable')?.getBoundingClientRect().width
 
     // skip updating height when preventAutoscroll is enabled, as it modifies the element's height in order to trick Safari into not scrolling

src/components/icons/UrlIcon.tsx

@@ -11,8 +11,8 @@ const UrlIcon = () => {
       viewBox='0 0 30 30'
       style={{
         marginLeft: '2px',
-        marginTop: '-0.056em',
-        padding: '0.167em 0.167em 0.167em 0.056em',
+        // Make sure the icon doesn't take up extra space.
+        padding: '0.05em 0.167em 0.167em 0',
         cursor: 'pointer',
         pointerEvents: 'all',
       }}