Merge pull request #176 from NEARBuilders/fix-mobile-ux

Improve mobile view
NEARBuilders · Feb 21, 2024 · 915f2b7 · 915f2b7
2 parents 6487347 + a32c0b8
commit 915f2b7
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 5 deletions.
diff --git a/apps/builddao/widget/Proposals.jsx b/apps/builddao/widget/Proposals.jsx
@@ -334,9 +334,9 @@ return (
           toggleModal: () => setFiltersModal(!showFiltersModal),
         }}
       />
-      <div className="d-flex justify-content-between">
-        <h3 className="text-white">Proposals</h3>
-        <div className="d-flex gap-3">
+      <div className="d-flex align-items-center flex-wrap gap-3 justify-content-between">
+        <h3 className="text-white m-0">Proposals</h3>
+        <div className="d-flex align-items-center gap-3">
           <Button variant="outline" onClick={() => setFiltersModal(true)}>
             Filters
           </Button>

diff --git a/apps/builddao/widget/components/navigation/header.jsx b/apps/builddao/widget/components/navigation/header.jsx
@@ -14,6 +14,10 @@ const Navbar = styled.div`
 
   background-color: #0b0c14;
   border-bottom: 1px solid var(--stroke-color, rgba(255, 255, 255, 0.2));
+
+  @media screen and (max-width: 768px) {
+    padding: 24px;
+  }
 `;
 
 const ButtonGroup = styled.div`
@@ -308,6 +312,7 @@ const AppHeader = ({ page, routes, ...props }) => (
                       key={k}
                       variant={page === k && "primary"}
                       className="w-100"
+                      onClick={() => setShowMenu(false)}
                     >
                       {route.init.icon && <i className={route.init.icon}></i>}
                       {route.init.name}

diff --git a/apps/builddao/widget/page/library.jsx b/apps/builddao/widget/page/library.jsx
@@ -1,5 +1,5 @@
 return (
-  <div className="container-xl mt-3">
+  <div className="container-xl mt-md-3">
     <Widget src="buildhub.near/widget/components.Library" />
   </div>
 );
diff --git a/apps/builddao/widget/template/SidebarLayout.jsx b/apps/builddao/widget/template/SidebarLayout.jsx
@@ -74,7 +74,7 @@ const Sidebar = ({ currentPath, page, routes }) => (
 // Define the new component that follows the SidebarLayout pattern
 function SidebarLayout({ currentPath, routes, page, children }) {
   return (
-    <Container className="container-xl mt-3">
+    <Container className="container-xl mt-md-3">
       <SidebarContainer>
         <Sidebar currentPath={currentPath} page={page} routes={routes} />
       </SidebarContainer>

diff --git a/apps/devs.near/widget/Common/Compose.jsx b/apps/devs.near/widget/Common/Compose.jsx
@@ -189,6 +189,12 @@ const Wrapper = styled.div`
 
   .up-buttons {
     margin-top: 12px;
+
+    @media screen and (max-width: 768px) {
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+    }
   }
 `;