Fix sidebar notices in collapsed mode

This commit is contained in:
Jamie Kyle 2023-09-11 13:55:51 -07:00 committed by GitHub
parent 30da67da1a
commit 6ae0edcc1e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 11 additions and 16 deletions

View file

@ -109,7 +109,7 @@ export function LeftPaneDialog({
}
let xButton: ReactNode;
if (hasXButton) {
if (hasXButton && containerWidthBreakpoint !== WidthBreakpoint.Narrow) {
xButton = (
<div className={`${BASE_CLASS_NAME}__container-close`}>
<button
@ -124,11 +124,12 @@ export function LeftPaneDialog({
);
}
const className = classNames([
BASE_CLASS_NAME,
type === undefined ? undefined : `${BASE_CLASS_NAME}--${type}`,
onClick === undefined ? undefined : `${BASE_CLASS_NAME}--clickable`,
]);
const className = classNames(BASE_CLASS_NAME, {
[`${BASE_CLASS_NAME}--width-narrow`]:
containerWidthBreakpoint === WidthBreakpoint.Narrow,
[`${BASE_CLASS_NAME}--${type}`]: type != null,
[`${BASE_CLASS_NAME}--clickable`]: onClick != null,
});
const message = (
<>
@ -143,7 +144,9 @@ export function LeftPaneDialog({
<>
<div className={`${BASE_CLASS_NAME}__container`}>
{typeof icon === 'string' ? <div className={iconClassName} /> : icon}
<div className={`${BASE_CLASS_NAME}__message`}>{message}</div>
{containerWidthBreakpoint !== WidthBreakpoint.Narrow && (
<div className={`${BASE_CLASS_NAME}__message`}>{message}</div>
)}
</div>
{xButton}
</>