From ddb684d79bbe8c9d3e77fda590a096a85a846e84 Mon Sep 17 00:00:00 2001
From: goldwolf <goldwolf.dev@gmail.com>
Date: Tue, 5 Dec 2023 15:31:28 -0400
Subject: [PATCH 1/2] modal-small

---
 packages/ui/src/app/providers/GlobalStyle.tsx         |  1 -
 .../ui/src/common/components/SidePane/SidePane.tsx    | 11 ++++++++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/app/providers/GlobalStyle.tsx b/packages/ui/src/app/providers/GlobalStyle.tsx
index 61bca5f0ea..5c2e85df4e 100644
--- a/packages/ui/src/app/providers/GlobalStyle.tsx
+++ b/packages/ui/src/app/providers/GlobalStyle.tsx
@@ -39,7 +39,6 @@ export const GlobalStyle = createGlobalStyle`
 
   *, *:before, *:after {
     box-sizing: border-box;
-    word-break: break-word;
   }
   *::selection, *:before::selection, *:after::selection {
     color: ${Colors.Blue[50]};
diff --git a/packages/ui/src/common/components/SidePane/SidePane.tsx b/packages/ui/src/common/components/SidePane/SidePane.tsx
index 1b2fa8fce3..21edc7b89a 100644
--- a/packages/ui/src/common/components/SidePane/SidePane.tsx
+++ b/packages/ui/src/common/components/SidePane/SidePane.tsx
@@ -67,11 +67,20 @@ export const SidePane = styled.div<{ topSize?: 'xs' | 's' | 'm' }>`
   position: relative;
   background-color: ${Colors.White};
   width: 100%;
-  max-width: 552px;
   height: 100%;
   overflow: hidden;
   ${Animations.showSidePane};
 
+  @media screen and (min-width: 320px) and (max-width: 768px) {
+    max-width: 100%;
+  }
+
+  @media screen and (min-width: 768px) and (max-width: 1440px) {
+    max-width: 90%;
+  }
+  @media screen and (min-width: 1440px) {
+    max-width: 1200px;
+  }
   ${({ topSize }) => {
     switch (topSize) {
       case 'xs':

From cca9e5b48589586e79caa48d7adc40f933473ade Mon Sep 17 00:00:00 2001
From: goldwolf <goldwolf.dev@gmail.com>
Date: Fri, 8 Dec 2023 08:16:22 -0400
Subject: [PATCH 2/2] SignalSidePane component

---
 .../common/components/SidePane/SidePane.tsx   | 39 ++++++++++++++++++-
 .../components/OpeningDescriptionPreview.tsx  |  6 +--
 2 files changed, 41 insertions(+), 4 deletions(-)

diff --git a/packages/ui/src/common/components/SidePane/SidePane.tsx b/packages/ui/src/common/components/SidePane/SidePane.tsx
index 21edc7b89a..9d12a12b3a 100644
--- a/packages/ui/src/common/components/SidePane/SidePane.tsx
+++ b/packages/ui/src/common/components/SidePane/SidePane.tsx
@@ -56,6 +56,43 @@ export const SidePaneTopButtonsGroup = styled(ButtonsGroup)`
 `
 
 export const SidePane = styled.div<{ topSize?: 'xs' | 's' | 'm' }>`
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: minmax(auto, ${({ topSize }) => (topSize === 's' ? '132px' : '192px')}) 1fr auto;
+  grid-template-areas:
+    'sidepaneheader'
+    'sidepanebody'
+    'modalfooter';
+  grid-area: modal;
+  position: relative;
+  background-color: ${Colors.White};
+  width: 100%;
+  max-width: 552px;
+  height: 100%;
+  overflow: hidden;
+  ${Animations.showSidePane};
+
+  ${({ topSize }) => {
+    switch (topSize) {
+      case 'xs':
+        return css`
+          grid-template-rows: auto 1fr;
+
+          ${SidePaneHeader} {
+            padding: 12px 24px;
+          }
+        `
+      case 's':
+        return css`
+          ${SidePaneHeader} {
+            align-content: space-between;
+          }
+        `
+    }
+  }};
+`
+
+export const SignalSidePane = styled.div<{ topSize?: 'xs' | 's' | 'm' }>`
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: minmax(auto, ${({ topSize }) => (topSize === 's' ? '132px' : '192px')}) 1fr auto;
@@ -74,13 +111,13 @@ export const SidePane = styled.div<{ topSize?: 'xs' | 's' | 'm' }>`
   @media screen and (min-width: 320px) and (max-width: 768px) {
     max-width: 100%;
   }
-
   @media screen and (min-width: 768px) and (max-width: 1440px) {
     max-width: 90%;
   }
   @media screen and (min-width: 1440px) {
     max-width: 1200px;
   }
+
   ${({ topSize }) => {
     switch (topSize) {
       case 'xs':
diff --git a/packages/ui/src/proposals/components/ProposalDetails/renderers/Markdown/components/OpeningDescriptionPreview.tsx b/packages/ui/src/proposals/components/ProposalDetails/renderers/Markdown/components/OpeningDescriptionPreview.tsx
index 1fbeb3701c..acba76a931 100644
--- a/packages/ui/src/proposals/components/ProposalDetails/renderers/Markdown/components/OpeningDescriptionPreview.tsx
+++ b/packages/ui/src/proposals/components/ProposalDetails/renderers/Markdown/components/OpeningDescriptionPreview.tsx
@@ -4,7 +4,7 @@ import React from 'react'
 import { CloseButton } from '@/common/components/buttons'
 import { MarkdownPreview } from '@/common/components/MarkdownPreview'
 import {
-  SidePane,
+  SignalSidePane,
   SidePaneBody,
   SidePaneGlass,
   SidePaneHeader,
@@ -29,7 +29,7 @@ export const OpeningDescriptionPreview = ({ onClose, description }: DescriptionP
 
   return (
     <SidePaneGlass onClick={onBackgroundClick}>
-      <SidePane topSize="s">
+      <SignalSidePane topSize="s">
         <SidePaneHeader>
           <SidePanelTop>
             <SidePaneTitle>Signal Description</SidePaneTitle>
@@ -41,7 +41,7 @@ export const OpeningDescriptionPreview = ({ onClose, description }: DescriptionP
             <MarkdownPreview markdown={description} />
           </DescriptionContainer>
         </SidePaneBody>
-      </SidePane>
+      </SignalSidePane>
     </SidePaneGlass>
   )
 }