Update: Work on new Friends tab + minor fixes

src/components/ui/Header.tsx

@@ -11,10 +11,13 @@ export default styled.div<Props>`
     font-weight: 600;
     user-select: none;
 
+    display: flex;
+    align-items: center;
+
     gap: 10px;
     flex: 0 auto;
     display: flex;
-    padding: 20px;
+    padding: 0 20px;
     flex-shrink: 0;
     align-items: center;
 
@@ -22,6 +25,10 @@ export default styled.div<Props>`
     background-size: cover !important;
     background-position: center !important;
 
+    svg {
+        flex-shrink: 0;
+    }
+
     ${ props => props.background && css`
         height: 120px;
         align-items: flex-end;

src/components/ui/Modal.tsx

@@ -42,6 +42,8 @@ const ModalContainer = styled.div`
     border-radius: 8px;
     max-width: calc(100vw - 20px);
 
+    inline-size: min(100%, 500px);
+
     animation-name: ${zoomIn};
     animation-duration: 0.25s;
     animation-timing-function: cubic-bezier(.3,.3,.18,1.1);