Skip to content

Commit 6d0d065

Browse files
noisysocksnoisysocks
authored
NTP: Omnibar design fixes i2 (#1889)
* Remove focusRing state and update popup focus styles: - Show rest state by defualt - Show focus state only when input/textarea is selected and empty - Show suggestions state only when suggestions list is open * Make close button clear input and hide suggestions in one click * Adjust padding around X button in SearchForm * Refocus input after clearing search term * Fix spacer height to accommodate largest tab without animation * Use --ntp-surface-tertiary (with correct value from Figma) when using default background and --ntp-surface-background-color when using a custom background * Use dark mode icons in TabSwitcher * Adjust omnibar and tab switcher background when using a custom background * Update ntp-controls-raised-backdrop color variables * Update SearchColorIcon and AiChatColorIcon SVG gradients and colors
1 parent 10cb102 commit 6d0d065

20 files changed

+177
-80
lines changed

‎special-pages/pages/new-tab/app/components/Icons.js‎

Lines changed: 102 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -196,14 +196,18 @@ export function SearchColorIcon(props) {
196196
return (
197197
<svg width="16" height="16" fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" {...props}>
198198
<g clip-path="url(#Search-Find-Color-16_svg__a)">
199-
<path fill="#ADC2FC" d="M12 7A5 5 0 1 1 2 7a5 5 0 0 1 10 0Z" />
199+
<path fill="#CCDAFF" d="M13 7A6 6 0 1 1 1 7a6 6 0 0 1 12 0Z" />
200200
<path fill="#fff" d="M7 2a4.98 4.98 0 0 1 3.403 1.338 5.5 5.5 0 0 0-7.065 7.065A5 5 0 0 1 7 2Z" opacity=".5" />
201201
<path
202-
fill="#557FF3"
202+
fill="url(#Search-Find-Color-16_svg__b)"
203203
d="M7 0a7 7 0 0 1 5.372 11.488l3.445 3.445.043.047a.625.625 0 0 1-.88.88l-.047-.043-3.445-3.445A7 7 0 1 1 7 0Zm0 1a6 6 0 1 0 0 12A6 6 0 0 0 7 1Z"
204204
/>
205205
</g>
206206
<defs>
207+
<linearGradient id="Search-Find-Color-16_svg__b" x1="8" x2="8" y1="0" y2="16" gradientUnits="userSpaceOnUse">
208+
<stop stop-color="#557FF3" />
209+
<stop offset="1" stop-color="#2B55CA" />
210+
</linearGradient>
207211
<clipPath id="Search-Find-Color-16_svg__a">
208212
<path fill="#fff" d="M0 0h16v16H0z" />
209213
</clipPath>
@@ -212,6 +216,39 @@ export function SearchColorIcon(props) {
212216
);
213217
}
214218

219+
/**
220+
* From https://dub.duckduckgo.com/duckduckgo/Icons/blob/Main/Color/16px/Search-Find-Color-16.svg
221+
* @param {import('preact').JSX.SVGAttributes<SVGSVGElement>} props
222+
*/
223+
export function SearchOnDarkColorIcon(props) {
224+
return (
225+
<svg width="16" height="16" fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" {...props}>
226+
<g clip-path="url(#Search-Find-OnDark-Color-16_svg__a)">
227+
<path fill="#444" d="M13 7A6 6 0 1 1 1 7a6 6 0 0 1 12 0Z" />
228+
<path
229+
fill="#fff"
230+
fill-opacity=".4"
231+
d="M7 2c1.315 0 2.512.508 3.404 1.339a5.5 5.5 0 0 0-7.065 7.065A5 5 0 0 1 7 2Z"
232+
opacity=".5"
233+
/>
234+
<path
235+
fill="url(#Search-Find-OnDark-Color-16_svg__b)"
236+
d="M7 0a7 7 0 0 1 5.371 11.486l3.446 3.447.08.098a.626.626 0 0 1-.866.867l-.098-.08-3.447-3.447A7 7 0 1 1 7 0Zm0 1a6 6 0 1 0 0 12A6 6 0 0 0 7 1Z"
237+
/>
238+
</g>
239+
<defs>
240+
<linearGradient id="Search-Find-OnDark-Color-16_svg__b" x1="8" x2="8" y1="0" y2="16" gradientUnits="userSpaceOnUse">
241+
<stop stop-color="#CCDAFF" />
242+
<stop offset="1" stop-color="#8FABF9" />
243+
</linearGradient>
244+
<clipPath id="Search-Find-OnDark-Color-16_svg__a">
245+
<path fill="#fff" d="M0 0h16v16H0z" />
246+
</clipPath>
247+
</defs>
248+
</svg>
249+
);
250+
}
251+
215252
/**
216253
* From https://dub.duckduckgo.com/duckduckgo/Icons/blob/Main/Glyphs/16px/Ai-Chat-16.svg
217254
* @param {import('preact').JSX.SVGAttributes<SVGSVGElement>} props
@@ -243,21 +280,21 @@ export function AiChatIcon(props) {
243280
export function AiChatColorIcon(props) {
244281
return (
245282
<svg width="16" height="16" fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" {...props}>
246-
<g clip-path="url(#Ai-Chat-Gradient-Color-16_svg__a)">
283+
<g clip-path="url(#Ai-Chat-Color-16_svg__a)">
247284
<path
248-
fill="url(#Ai-Chat-Gradient-Color-16_svg__b)"
285+
fill="url(#Ai-Chat-Color-16_svg__b)"
249286
d="M1.164 14.763c-.441.51-.014 1.284.65 1.17 2.655-.457 7.306-1.338 9.199-2.206C13.938 12.667 16 10.111 16 7.125 16 3.19 12.418 0 8 0S0 3.19 0 7.125c0 1.974.902 3.76 2.358 5.051.32.283.38.773.1 1.095l-1.294 1.492Z"
250287
/>
251288
<path
252-
fill="url(#Ai-Chat-Gradient-Color-16_svg__c)"
289+
fill="url(#Ai-Chat-Color-16_svg__c)"
253290
d="M15 7.125c0 2.495-1.729 4.72-4.328 5.662l-.039.014-.037.017c-.838.384-2.376.803-4.114 1.19a98.74 98.74 0 0 1-4.03.797l.762-.878c.68-.785.487-1.898-.193-2.5-1.227-1.087-1.973-2.55-2.019-4.147L1 7.125C1 3.848 4.022 1 8 1V0l-.207.003C3.54.099.11 3.153.003 6.94L0 7.125c0 1.913.846 3.649 2.223 4.929l.135.122c.32.283.38.773.1 1.096l-1.293 1.491c-.442.51-.015 1.284.65 1.17 2.654-.456 7.305-1.338 9.198-2.206C13.938 12.667 16 10.111 16 7.125l-.002-.184C15.888 3.091 12.349.001 8 .001v1c3.916 0 6.905 2.759 6.998 5.97l.002.154Z"
254291
/>
255292
<path
256293
fill="#fff"
257294
d="M7.632 2.787c.096-.383.64-.383.736 0l.438 1.753c.203.815.84 1.45 1.654 1.654l1.753.438c.383.096.383.64 0 .736l-1.753.438c-.815.203-1.45.84-1.654 1.654l-.438 1.753c-.096.383-.64.383-.736 0L7.194 9.46A2.273 2.273 0 0 0 5.54 7.806l-1.753-.438c-.383-.096-.383-.64 0-.736l1.753-.438A2.273 2.273 0 0 0 7.194 4.54l.438-1.753Z"
258295
/>
259296
<path
260-
fill="url(#Ai-Chat-Gradient-Color-16_svg__d)"
297+
fill="url(#Ai-Chat-Color-16_svg__d)"
261298
d="M6.662 2.544C7 1.195 8.867 1.154 9.3 2.418l.038.126.438 1.753c.114.457.47.813.927.927l1.753.438c1.392.348 1.392 2.328 0 2.676l-1.753.438c-.457.114-.813.47-.927.927l-.438 1.753c-.348 1.392-2.328 1.392-2.676 0l-.438-1.753a1.274 1.274 0 0 0-.927-.927l-1.753-.438c-1.392-.348-1.392-2.328 0-2.676l1.753-.438c.457-.114.813-.47.927-.927l.438-1.753ZM8 5.271A3.273 3.273 0 0 1 6.27 7 3.273 3.273 0 0 1 8 8.729 3.274 3.274 0 0 1 9.729 7 3.273 3.273 0 0 1 8 5.27Z"
262299
/>
263300
<path
@@ -266,19 +303,69 @@ export function AiChatColorIcon(props) {
266303
/>
267304
</g>
268305
<defs>
269-
<linearGradient id="Ai-Chat-Gradient-Color-16_svg__b" x1="8" x2="8" y1="0" y2="15.944" gradientUnits="userSpaceOnUse">
306+
<linearGradient id="Ai-Chat-Color-16_svg__b" x1="8" x2="8" y1="0" y2="15.944" gradientUnits="userSpaceOnUse">
270307
<stop stop-color="#A7B7FD" />
271-
<stop offset="1" stop-color="#5981F3" />
308+
<stop offset="1" stop-color="#3969EF" />
309+
</linearGradient>
310+
<linearGradient id="Ai-Chat-Color-16_svg__c" x1="8" x2="8" y1="15.944" y2="0" gradientUnits="userSpaceOnUse">
311+
<stop stop-color="#2B55CA" />
312+
<stop offset="1" stop-color="#557FF3" />
313+
</linearGradient>
314+
<linearGradient id="Ai-Chat-Color-16_svg__d" x1="8" x2="8" y1="2.5" y2="11.5" gradientUnits="userSpaceOnUse">
315+
<stop stop-color="#839DF9" />
316+
<stop offset="1" stop-color="#3969EF" />
317+
</linearGradient>
318+
<clipPath id="Ai-Chat-Color-16_svg__a">
319+
<path fill="#fff" d="M0 0h16v16H0z" />
320+
</clipPath>
321+
</defs>
322+
</svg>
323+
);
324+
}
325+
326+
/**
327+
* https://dub.duckduckgo.com/duckduckgo/Icons/blob/Main/Color/16px/Ai-Chat-OnDark-Color-16.svg
328+
* @param {import('preact').JSX.SVGAttributes<SVGSVGElement>} props
329+
*/
330+
export function AiChatOnDarkColorIcon(props) {
331+
return (
332+
<svg width="16" height="16" fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" {...props}>
333+
<g clip-path="url(#Ai-Chat-OnDark-Color-16_svg__a)">
334+
<path
335+
fill="url(#Ai-Chat-OnDark-Color-16_svg__b)"
336+
d="M1.164 14.763c-.441.51-.014 1.284.65 1.17 2.655-.457 7.306-1.338 9.199-2.206C13.938 12.667 16 10.111 16 7.125 16 3.19 12.418 0 8 0S0 3.19 0 7.125c0 1.974.902 3.76 2.358 5.051.32.283.38.773.1 1.095l-1.294 1.492Z"
337+
/>
338+
<path
339+
fill="url(#Ai-Chat-OnDark-Color-16_svg__c)"
340+
d="M15 7.125c0 2.495-1.729 4.72-4.328 5.662l-.039.014-.037.017c-.838.384-2.376.803-4.114 1.19a98.74 98.74 0 0 1-4.03.797l.762-.878c.68-.785.487-1.898-.193-2.5-1.227-1.087-1.973-2.55-2.019-4.147L1 7.125C1 3.848 4.022 1 8 1V0l-.207.003C3.54.099.11 3.153.003 6.94L0 7.125c0 1.913.846 3.649 2.223 4.929l.135.122c.32.283.38.773.1 1.096l-1.293 1.491c-.442.51-.015 1.284.65 1.17 2.654-.456 7.305-1.338 9.198-2.206C13.938 12.667 16 10.111 16 7.125l-.002-.184C15.888 3.091 12.349.001 8 .001v1c3.916 0 6.905 2.759 6.998 5.97l.002.154Z"
341+
/>
342+
<path
343+
fill="#fff"
344+
d="M7.632 2.787c.096-.383.64-.383.736 0l.438 1.753c.203.815.84 1.45 1.654 1.654l1.753.438c.383.096.383.64 0 .736l-1.753.438c-.815.203-1.45.84-1.654 1.654l-.438 1.753c-.096.383-.64.383-.736 0L7.194 9.46A2.273 2.273 0 0 0 5.54 7.806l-1.753-.438c-.383-.096-.383-.64 0-.736l1.753-.438A2.273 2.273 0 0 0 7.194 4.54l.438-1.753Z"
345+
/>
346+
<path
347+
fill="url(#Ai-Chat-OnDark-Color-16_svg__d)"
348+
d="M6.662 2.544C7 1.195 8.867 1.154 9.3 2.418l.038.126.438 1.753c.114.457.47.813.927.927l1.753.438c1.392.348 1.392 2.328 0 2.676l-1.753.438c-.457.114-.813.47-.927.927l-.438 1.753c-.348 1.392-2.328 1.392-2.676 0l-.438-1.753a1.274 1.274 0 0 0-.927-.927l-1.753-.438c-1.392-.348-1.392-2.328 0-2.676l1.753-.438c.457-.114.813-.47.927-.927l.438-1.753ZM8 5.271A3.273 3.273 0 0 1 6.27 7 3.273 3.273 0 0 1 8 8.729 3.274 3.274 0 0 1 9.729 7 3.273 3.273 0 0 1 8 5.27Z"
349+
/>
350+
<path
351+
fill="#2B55CA"
352+
d="M7.632 2.787c.096-.383.64-.383.736 0l.438 1.753c.203.815.84 1.45 1.654 1.654l1.753.438c.383.096.383.64 0 .736l-1.753.438c-.815.203-1.45.84-1.654 1.654l-.438 1.753c-.096.383-.64.383-.736 0L7.194 9.46A2.273 2.273 0 0 0 5.54 7.806l-1.753-.438c-.383-.096-.383-.64 0-.736l1.753-.438A2.273 2.273 0 0 0 7.194 4.54l.438-1.753Z"
353+
/>
354+
</g>
355+
<defs>
356+
<linearGradient id="Ai-Chat-OnDark-Color-16_svg__b" x1="8" x2="8" y1="0" y2="15.944" gradientUnits="userSpaceOnUse">
357+
<stop stop-color="#CCDAFF" />
358+
<stop offset="1" stop-color="#8FABF9" />
272359
</linearGradient>
273-
<linearGradient id="Ai-Chat-Gradient-Color-16_svg__c" x1="8" x2="8" y1="0" y2="15.944" gradientUnits="userSpaceOnUse">
274-
<stop stop-color="#7C99F7" />
275-
<stop offset="1" stop-color="#4B74EE" />
360+
<linearGradient id="Ai-Chat-OnDark-Color-16_svg__c" x1="8" x2="8" y1="15.944" y2="0" gradientUnits="userSpaceOnUse">
361+
<stop stop-color="#557FF3" />
362+
<stop offset="1" stop-color="#ADC2FC" />
276363
</linearGradient>
277-
<linearGradient id="Ai-Chat-Gradient-Color-16_svg__d" x1="8" x2="8" y1="2.5" y2="11.5" gradientUnits="userSpaceOnUse">
278-
<stop stop-color="#8EA6FA" />
279-
<stop offset="1" stop-color="#6186F4" />
364+
<linearGradient id="Ai-Chat-OnDark-Color-16_svg__d" x1="8" x2="8" y1="2.5" y2="11.5" gradientUnits="userSpaceOnUse">
365+
<stop stop-color="#CCDAFF" />
366+
<stop offset="1" stop-color="#ADC2FC" />
280367
</linearGradient>
281-
<clipPath id="Ai-Chat-Gradient-Color-16_svg__a">
368+
<clipPath id="Ai-Chat-OnDark-Color-16_svg__a">
282369
<path fill="#fff" d="M0 0h16v16H0z" />
283370
</clipPath>
284371
</defs>

‎special-pages/pages/new-tab/app/omnibar/components/AiChatForm.js‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,10 @@ import styles from './AiChatForm.module.css';
1515
* @param {object} props
1616
* @param {string} props.chat
1717
* @param {boolean} [props.autoFocus]
18-
* @param {(event: FocusEvent) => void} props.onFocus
19-
* @param {(event: FocusEvent) => void} props.onBlur
20-
* @param {(event: InputEvent) => void} props.onInput
2118
* @param {(chat: string) => void} props.onChange
2219
* @param {(params: { chat: string, target: OpenTarget }) => void} props.onSubmit
2320
*/
24-
export function AiChatForm({ chat, autoFocus, onFocus, onBlur, onInput, onChange, onSubmit }) {
21+
export function AiChatForm({ chat, autoFocus, onChange, onSubmit }) {
2522
const { t } = useTypedTranslationWith(/** @type {Strings} */ ({}));
2623
const platformName = usePlatformName();
2724

@@ -96,10 +93,6 @@ export function AiChatForm({ chat, autoFocus, onFocus, onBlur, onInput, onChange
9693
aria-label={t('omnibar_aiChatFormPlaceholder')}
9794
autoComplete="off"
9895
rows={1}
99-
// Using capture to work around WebKit which doesn't fire focus/blur event when user moves focus from/to address bar.
100-
onFocusCapture={onFocus}
101-
onBlurCapture={onBlur}
102-
onInput={onInput}
10396
onKeyDown={handleKeyDown}
10497
onChange={(event) => onChange(event.currentTarget.value)}
10598
/>

‎special-pages/pages/new-tab/app/omnibar/components/Omnibar.js‎

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,6 @@ export function Omnibar({ mode, setMode, enableAi }) {
3030
const [query, setQuery] = useState(/** @type {String} */ (''));
3131
const [resetKey, setResetKey] = useState(0);
3232
const [autoFocus, setAutoFocus] = useState(false);
33-
const [focusRing, setFocusRing] = useState(/** @type {boolean|undefined} */ (undefined));
3433

3534
const { openSuggestion, submitSearch, submitChat } = useContext(OmnibarContext);
3635

@@ -60,12 +59,11 @@ export function Omnibar({ mode, setMode, enableAi }) {
6059
/** @type {(mode: OmnibarConfig['mode']) => void} */
6160
const handleChangeMode = (nextMode) => {
6261
setAutoFocus(true);
63-
setFocusRing(undefined);
6462
setMode(nextMode);
6563
};
6664

6765
return (
68-
<div key={resetKey} class={styles.root} data-mode={mode} data-focus-ring={focusRing}>
66+
<div key={resetKey} class={styles.root} data-mode={mode}>
6967
<LogoStacked class={styles.logo} aria-label={t('omnibar_logoAlt')} />
7068
{enableAi && <TabSwitcher mode={mode} onChange={handleChangeMode} />}
7169
<SearchFormProvider term={query} setTerm={setQuery}>
@@ -75,15 +73,7 @@ export function Omnibar({ mode, setMode, enableAi }) {
7573
{mode === 'search' ? (
7674
<SearchForm autoFocus={autoFocus} onOpenSuggestion={handleOpenSuggestion} onSubmit={handleSubmitSearch} />
7775
) : (
78-
<AiChatForm
79-
chat={query}
80-
autoFocus={autoFocus}
81-
onFocus={() => setFocusRing(true)}
82-
onBlur={() => setFocusRing(false)}
83-
onInput={() => setFocusRing(false)}
84-
onChange={setQuery}
85-
onSubmit={handleSubmitChat}
86-
/>
76+
<AiChatForm chat={query} autoFocus={autoFocus} onChange={setQuery} onSubmit={handleSubmitChat} />
8777
)}
8878
</ResizingContainer>
8979
{mode === 'search' && <SuggestionsList onOpenSuggestion={handleOpenSuggestion} />}

‎special-pages/pages/new-tab/app/omnibar/components/Omnibar.module.css‎

Lines changed: 20 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,14 @@
44
flex-direction: column;
55
gap: 10px;
66
padding-bottom: var(--sp-15);
7+
8+
[data-theme="light"] & {
9+
--omnibar-translucent-background-color: rgba(255, 255, 255, 0.54);
10+
}
11+
12+
[data-theme="dark"] & {
13+
--omnibar-translucent-background-color: rgba(0, 0, 0, 0.3);
14+
}
715
}
816

917
.logo {
@@ -13,39 +21,38 @@
1321

1422
/*
1523
* There are three containers:
16-
* 1) .spacer - Pushes other widgets away. Fixed height. Contents overflow. Height animates.
24+
* 1) .spacer - Pushes other widgets away. Fixed height to accommodate largest tab (Duck.ai). Contents overflow. No animation.
1725
* 2) .popup - Has border. Auto height. No animation.
1826
* 3) .field - Fixed height set to scrollHeight of children. Height animates.
1927
*
2028
* The intention is that:
21-
* - Other widgets are smoothly pushed away when switching to the Duck.ai tab.
2229
* - Suggestions list and expanded Duck.ai textarea always overflows over other widgets.
2330
* - Omnibar height expands smoothly when switching tab or entering mutiline text into Duck.ai textarea.
2431
* - Omnibar height does NOT animate when suggestions list opens or changes.
2532
*/
2633

2734
.spacer {
2835
align-self: stretch;
29-
transition: height 200ms ease;
36+
height: calc(var(--sp-16) + 3px * 2);
3037
z-index: 1;
3138

3239
@media (prefers-reduced-motion: reduce) {
3340
transition: none;
3441
}
35-
36-
[data-mode="search"] & {
37-
height: calc(var(--sp-10) + 3px * 2);
38-
}
39-
40-
[data-mode="ai"] & {
41-
height: calc(var(--sp-20) + 3px * 2);
42-
}
4342
}
4443

4544
.popup {
46-
backdrop-filter: blur(16px);
4745
background: var(--ntp-surface-tertiary);
46+
border-radius: 12px;
47+
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 4px 8px 0 rgba(0, 0, 0, 0.08);
4848
display: flow-root; /* Prevent margin collapse on .field */
49+
margin: 3px;
50+
51+
body:not([data-background-kind="default"]) & {
52+
backdrop-filter: blur(48px);
53+
background: var(--omnibar-translucent-background-color);
54+
outline: 1px solid var(--ntp-surface-border-color);
55+
}
4956
}
5057

5158
.field {
@@ -59,16 +66,8 @@
5966
}
6067
}
6168

62-
/* Rest */
63-
.root:not(:has([role="listbox"])) .popup {
64-
border-radius: 12px;
65-
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 4px 8px 0 rgba(0, 0, 0, 0.08);
66-
margin: 3px;
67-
}
68-
6969
/* Focused */
70-
.root:not(:has([role="listbox"])):focus-within:not([data-focus-ring="false"]) .popup,
71-
.root:not(:has([role="listbox"]))[data-focus-ring="true"] .popup {
70+
.root:focus-within:has(input:placeholder-shown, textarea:placeholder-shown) .popup {
7271
border-radius: 15px;
7372
border: 2px solid var(--ntp-accent-primary);
7473
box-shadow: none;

‎special-pages/pages/new-tab/app/omnibar/components/SearchForm.js‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -168,11 +168,9 @@ export function SearchForm({ autoFocus, onOpenSuggestion, onSubmit }) {
168168
tabIndex={0} // Needed so that WebKit sets event.relatedTarget when firing blur event
169169
onClick={(event) => {
170170
event.preventDefault();
171-
if (suggestions.length > 0) {
172-
hideSuggestions();
173-
} else {
174-
setTerm('');
175-
}
171+
hideSuggestions();
172+
setTerm('');
173+
inputRef.current?.focus();
176174
}}
177175
>
178176
<CloseSmallIcon />

‎special-pages/pages/new-tab/app/omnibar/components/SearchForm.module.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
display: flex;
44
height: var(--sp-10);
55
padding: var(--sp-3);
6+
padding-right: var(--sp-1);
67
}
78

89
.input {
@@ -12,7 +13,7 @@
1213
font: var(--input-font);
1314
left: 0;
1415
padding: var(--sp-3);
15-
padding-right: calc(var(--suffix-text-width) + var(--sp-1) + var(--sp-8) + var(--sp-3)); /* Suffix + padding + close button + padding */
16+
padding-right: calc(var(--suffix-text-width) + var(--sp-1) + var(--sp-8) + var(--sp-1)); /* Suffix + padding + close button + padding */
1617
position: absolute;
1718
right: 0;
1819

0 commit comments

Comments
 (0)