From 6ae0edcc1e492817bef152dc204540a30071b154 Mon Sep 17 00:00:00 2001
From: Jamie Kyle <113370520+jamiebuilds-signal@users.noreply.github.com>
Date: Mon, 11 Sep 2023 13:55:51 -0700
Subject: [PATCH] Fix sidebar notices in collapsed mode

---
 stylesheets/components/LeftPaneDialog.scss | 10 +---------
 ts/components/LeftPaneDialog.tsx           | 17 ++++++++++-------
 2 files changed, 11 insertions(+), 16 deletions(-)

diff --git a/stylesheets/components/LeftPaneDialog.scss b/stylesheets/components/LeftPaneDialog.scss
index 7f6822ca32..8663d73340 100644
--- a/stylesheets/components/LeftPaneDialog.scss
+++ b/stylesheets/components/LeftPaneDialog.scss
@@ -34,7 +34,7 @@
   letter-spacing: -0.0025em;
   font-weight: 400;
 
-  .module-left-pane--width-narrow & {
+  &--width-narrow {
     padding-inline-start: 36px;
   }
 
@@ -56,10 +56,6 @@
   &__container-close {
     display: flex;
     justify-content: flex-end;
-
-    .module-left-pane--width-narrow & {
-      display: none;
-    }
   }
 
   &__spinner-container {
@@ -169,10 +165,6 @@
 
   &__message {
     width: 100%;
-
-    .module-left-pane--width-narrow & {
-      display: none;
-    }
   }
 
   &__message,
diff --git a/ts/components/LeftPaneDialog.tsx b/ts/components/LeftPaneDialog.tsx
index e338a0e34e..bfc12cffe6 100644
--- a/ts/components/LeftPaneDialog.tsx
+++ b/ts/components/LeftPaneDialog.tsx
@@ -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}
     </>