Responsive in Profile modal component

EyeSeeTea · Jun 20, 2024 · 3bb0eb6 · 3bb0eb6
1 parent 1a21585
commit 3bb0eb6
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/src/webapp/components/profile-modal/ProfileModal.tsx b/src/webapp/components/profile-modal/ProfileModal.tsx
@@ -44,6 +44,9 @@ export const ProfileModal: React.FC<ProfileModalProps> = React.memo(
 
 const Content = styled.div`
     display: flex;
+    @media (max-width: 600px) {
+        flex-direction: column;
+    }
 `;
 
 const Name = styled.span`
@@ -59,6 +62,9 @@ const Footer = styled.div`
 
 const StyledCard = styled(Card)`
     width: 500px;
+    @media (max-width: 600px) {
+        width: 300px;
+    }
     display: flex;
     flex-direction: column;
     position: absolute;

diff --git a/src/webapp/pages/app/App.css b/src/webapp/pages/app/App.css
@@ -1,5 +1,5 @@
 html {
-    background-color: #f3f3f3;
+    background-color: #f8f9fa;
     font-family: Roboto, Arial, sans-serif;
     overflow-y: scroll;
 }