Skip to content

Commit 62ce00d

Browse files
AntoLCAntoLC
committed
🐛(frontend) fix alignment of side menu
Recent refactoring moved the side menu position. This commit fixes its alignment.
1 parent 82a0c1a commit 62ce00d

File tree

2 files changed

+136
-137
lines changed

2 files changed

+136
-137
lines changed

‎CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ and this project adheres to
2020
- 🐛(docx) fix image overflow by limiting width to 600px during export #1525
2121
- 🐛(frontend) preserve @ character when esc is pressed after typing it #1512
2222
- 🐛(frontend) fix pdf embed to use full width #1526
23+
- 🐛(frontend) fix alignment of side menu #1597
2324

2425
## [3.9.0] - 2025-11-10
2526

‎src/frontend/apps/impress/src/features/docs/doc-editor/styles.tsx‎

Lines changed: 135 additions & 137 deletions
Original file line numberDiff line numberDiff line change
@@ -7,153 +7,151 @@ export const cssEditor = css`
77
height: 100%;
88
}
99
10-
& .ProseMirror {
11-
/**
12-
* WCAG Accessibility contrast fixes for BlockNote editor
13-
*/
14-
.bn-block-content[data-is-empty-and-focused][data-content-type='paragraph']
15-
.bn-inline-content:has(> .ProseMirror-trailingBreak:only-child)::before {
16-
color: #767676 !important;
17-
font-weight: 400;
18-
}
10+
& .bn-editor {
11+
color: var(--c--theme--colors--greyscale-700);
12+
}
1913
20-
/**
21-
* Ensure long placeholder text is truncated with ellipsis
22-
*/
23-
.bn-block-content[data-is-empty-and-focused][data-content-type='paragraph']
24-
.bn-inline-content:has(> .ProseMirror-trailingBreak:only-child)::before {
25-
text-overflow: ellipsis;
26-
white-space: nowrap;
27-
overflow: hidden;
28-
width: inherit;
29-
height: inherit;
30-
}
31-
.bn-block-content[data-is-empty-and-focused][data-content-type='paragraph']
32-
.bn-inline-content:has(> .ProseMirror-trailingBreak:only-child) {
33-
position: relative;
34-
}
14+
/**
15+
* WCAG Accessibility contrast fixes for BlockNote editor
16+
*/
17+
.bn-block-content[data-is-empty-and-focused][data-content-type='paragraph']
18+
.bn-inline-content:has(> .ProseMirror-trailingBreak:only-child)::before {
19+
color: #767676 !important;
20+
font-weight: 400;
21+
}
3522
36-
/**
37-
* Ensure images with unsafe URLs are not interactive
38-
*/
39-
img.bn-visual-media[src*='-unsafe'] {
40-
pointer-events: none;
41-
}
23+
/**
24+
* Ensure long placeholder text is truncated with ellipsis
25+
*/
26+
.bn-block-content[data-is-empty-and-focused][data-content-type='paragraph']
27+
.bn-inline-content:has(> .ProseMirror-trailingBreak:only-child)::before {
28+
text-overflow: ellipsis;
29+
white-space: nowrap;
30+
overflow: hidden;
31+
width: inherit;
32+
height: inherit;
33+
}
34+
.bn-block-content[data-is-empty-and-focused][data-content-type='paragraph']
35+
.bn-inline-content:has(> .ProseMirror-trailingBreak:only-child) {
36+
position: relative;
37+
}
4238
43-
/**
44-
* Collaboration cursor styles
45-
*/
46-
.collaboration-cursor-custom__base {
47-
position: relative;
48-
}
49-
.collaboration-cursor-custom__caret {
50-
position: absolute;
51-
height: 100%;
52-
width: 2px;
53-
bottom: 4%;
54-
left: -1px;
55-
}
39+
/**
40+
* Ensure images with unsafe URLs are not interactive
41+
*/
42+
img.bn-visual-media[src*='-unsafe'] {
43+
pointer-events: none;
44+
}
45+
46+
/**
47+
* Collaboration cursor styles
48+
*/
49+
.collaboration-cursor-custom__base {
50+
position: relative;
51+
}
52+
.collaboration-cursor-custom__caret {
53+
position: absolute;
54+
height: 100%;
55+
width: 2px;
56+
bottom: 4%;
57+
left: -1px;
58+
}
59+
.collaboration-cursor-custom__label {
60+
color: #0d0d0d;
61+
font-size: 12px;
62+
font-weight: 600;
63+
-webkit-user-select: none;
64+
-moz-user-select: none;
65+
user-select: none;
66+
position: absolute;
67+
top: -17px;
68+
left: 0px;
69+
padding: 0px 6px;
70+
border-radius: 0px;
71+
white-space: nowrap;
72+
transition: clip-path 0.3s ease-in-out;
73+
border-radius: 4px 4px 4px 0;
74+
box-shadow: inset -2px 2px 6px #ffffff00;
75+
clip-path: polygon(0 85%, 4% 85%, 4% 100%, 0% 100%);
76+
}
77+
.collaboration-cursor-custom__base[data-active]
5678
.collaboration-cursor-custom__label {
57-
color: #0d0d0d;
58-
font-size: 12px;
59-
font-weight: 600;
60-
-webkit-user-select: none;
61-
-moz-user-select: none;
62-
user-select: none;
63-
position: absolute;
64-
top: -17px;
65-
left: 0px;
66-
padding: 0px 6px;
67-
border-radius: 0px;
68-
white-space: nowrap;
69-
transition: clip-path 0.3s ease-in-out;
70-
border-radius: 4px 4px 4px 0;
71-
box-shadow: inset -2px 2px 6px #ffffff00;
72-
clip-path: polygon(0 85%, 4% 85%, 4% 100%, 0% 100%);
73-
}
74-
.collaboration-cursor-custom__base[data-active]
75-
.collaboration-cursor-custom__label {
76-
pointer-events: none;
77-
box-shadow: inset -2px 2px 6px #ffffff88;
78-
clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
79-
}
79+
pointer-events: none;
80+
box-shadow: inset -2px 2px 6px #ffffff88;
81+
clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
82+
}
8083
81-
/**
82-
* Side menu
83-
*/
84-
.bn-side-menu[data-block-type='heading'][data-level='1'] {
85-
height: 50px;
86-
}
87-
.bn-side-menu[data-block-type='heading'][data-level='2'] {
88-
height: 43px;
89-
}
90-
.bn-side-menu[data-block-type='heading'][data-level='3'] {
91-
height: 35px;
92-
}
93-
.bn-side-menu[data-block-type='divider'] {
94-
height: 38px;
95-
}
96-
.bn-side-menu .mantine-UnstyledButton-root svg {
97-
color: #767676 !important;
98-
}
84+
/**
85+
* Side menu
86+
*/
87+
.bn-side-menu[data-block-type='heading'][data-level='1'] {
88+
height: 54px;
89+
}
90+
.bn-side-menu[data-block-type='heading'][data-level='2'] {
91+
height: 43px;
92+
}
93+
.bn-side-menu[data-block-type='heading'][data-level='3'] {
94+
height: 35px;
95+
}
96+
.bn-side-menu[data-block-type='divider'] {
97+
height: 38px;
98+
}
99+
.bn-side-menu .mantine-UnstyledButton-root svg {
100+
color: #767676 !important;
101+
}
99102
100-
/**
101-
* Callout, Paragraph and Heading blocks
102-
*/
103-
.bn-block {
104-
border-radius: var(--c--theme--spacings--3xs);
105-
}
106-
.bn-block-outer {
107-
border-radius: var(--c--theme--spacings--3xs);
108-
}
109-
.bn-block > .bn-block-content[data-background-color] {
110-
padding: var(--c--theme--spacings--3xs) var(--c--theme--spacings--3xs);
111-
border-radius: var(--c--theme--spacings--3xs);
112-
}
113-
.bn-block-content[data-content-type='checkListItem'][data-checked='true']
114-
.bn-inline-content {
115-
text-decoration: none;
116-
}
117-
h1 {
118-
font-size: 1.875rem;
119-
}
120-
h2 {
121-
font-size: 1.5rem;
122-
}
123-
h3 {
124-
font-size: 1.25rem;
125-
}
126-
a {
127-
color: var(--c--theme--colors--greyscale-600);
128-
cursor: pointer;
129-
}
103+
/**
104+
* Callout, Paragraph and Heading blocks
105+
*/
106+
.bn-block {
107+
border-radius: var(--c--theme--spacings--3xs);
108+
}
109+
.bn-block-outer {
110+
border-radius: var(--c--theme--spacings--3xs);
111+
}
112+
.bn-block > .bn-block-content[data-background-color] {
113+
padding: var(--c--theme--spacings--3xs) var(--c--theme--spacings--3xs);
114+
border-radius: var(--c--theme--spacings--3xs);
115+
}
116+
.bn-block-content[data-content-type='checkListItem'][data-checked='true']
117+
.bn-inline-content {
118+
text-decoration: none;
119+
}
120+
h1 {
121+
font-size: 1.875rem;
122+
}
123+
h2 {
124+
font-size: 1.5rem;
125+
}
126+
h3 {
127+
font-size: 1.25rem;
128+
}
129+
a {
130+
color: var(--c--theme--colors--greyscale-600);
131+
cursor: pointer;
132+
}
133+
.bn-block-group
130134
.bn-block-group
131-
.bn-block-group
132-
.bn-block-outer:not([data-prev-depth-changed]):before {
133-
border-left: none;
134-
}
135+
.bn-block-outer:not([data-prev-depth-changed]):before {
136+
border-left: none;
135137
}
136138
137-
& .bn-editor {
138-
color: var(--c--theme--colors--greyscale-700);
139-
140-
/**
141-
* Quotes
142-
*/
143-
blockquote {
144-
border-left: 4px solid var(--c--theme--colors--greyscale-300);
145-
font-style: italic;
146-
}
139+
/**
140+
* Quotes
141+
*/
142+
blockquote {
143+
border-left: 4px solid var(--c--theme--colors--greyscale-300);
144+
font-style: italic;
145+
}
147146
148-
/**
149-
* Divider
150-
*/
151-
[data-content-type='divider'] hr {
152-
background: #d3d2cf;
153-
margin: 1rem 0;
154-
width: 100%;
155-
border: 1px solid #d3d2cf;
156-
}
147+
/**
148+
* Divider
149+
*/
150+
[data-content-type='divider'] hr {
151+
background: #d3d2cf;
152+
margin: 1rem 0;
153+
width: 100%;
154+
border: 1px solid #d3d2cf;
157155
}
158156
159157
& .bn-block-outer:not(:first-child) {

0 commit comments

Comments
 (0)