Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

#986 fix space takeup for url link icon #2168

Merged
merged 16 commits into from
Aug 26, 2024
Merged
Show file tree
Hide file tree
Changes from 7 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 13 additions & 1 deletion src/App.css
Original file line number Diff line number Diff line change
Expand Up @@ -573,7 +573,11 @@ This prevents table cols being rendered as multiline content, which causes inaac
}

.thought-annotation a {
position: relative;
/* 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;

z-index: var(--z-index-thought-annotation-link);
}

Expand Down Expand Up @@ -1814,6 +1818,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 {
Expand All @@ -1828,6 +1838,8 @@ h1 .num-contexts {
/* Fix a tag position after overflow:hidden applined on span tag. */
.single-line .thought-annotation .editable-annotation-text + a {
position: absolute;
/* assign top value to avoid tag jumping when position changes to absolute. */
top: 3px;
baproactive marked this conversation as resolved.
Show resolved Hide resolved
}
.single-line .thought-annotation .editable-annotation-text + a + .superscript-container {
position: absolute;
Expand Down
7 changes: 6 additions & 1 deletion src/components/VirtualThought.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
raineorshine marked this conversation as resolved.
Show resolved Hide resolved
)
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
Expand Down