feat: improve layout breakpoints

envelope-zero · Jan 27, 2024 · f477a13 · f477a13
1 parent 08f60ae
commit f477a13
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 10 deletions.
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
@@ -90,7 +90,7 @@ const Layout = ({
           <Transition.Root show={sidebarOpen} as={Fragment}>
             <Dialog
               as="div"
-              className="fixed inset-0 flex z-40 md:hidden"
+              className="fixed inset-0 flex z-40 lg:hidden"
               open={sidebarOpen}
               onClose={() => setSidebarOpen(false)}
             >
@@ -225,7 +225,7 @@ const Layout = ({
           </Transition.Root>
 
           {/* Static sidebar for desktop */}
-          <div className="hidden md:flex md:w-64 md:flex-col md:fixed md:inset-y-0">
+          <div className="hidden lg:flex lg:w-64 lg:flex-col lg:fixed lg:inset-y-0">
             <div className="flex-1 flex flex-col min-h-0 border-r border-gray-200 dark:border-gray-900 bg-white dark:bg-slate-800">
               <div className="flex-1 flex flex-col justify-between pt-5 pb-4 overflow-y-auto">
                 <div>
@@ -303,9 +303,9 @@ const Layout = ({
         </>
       )}
 
-      <div className={`${hideNav ? '' : 'md:pl-64'} flex flex-col flex-1`}>
+      <div className={`${hideNav ? '' : 'lg:pl-64'} flex flex-col flex-1`}>
         <div
-          className="sticky top-0 z-10 md:hidden px-6 pt-4 bg-gray-100 dark:bg-slate-900"
+          className="sticky top-0 z-10 lg:hidden px-6 pt-4 bg-gray-100 dark:bg-slate-900"
           ref={headerRef as React.RefObject<HTMLDivElement>}
         >
           <button
@@ -322,15 +322,15 @@ const Layout = ({
           </button>
         </div>
         <main className="flex-1">
-          <div className="py-4 md:py-6">
+          <div className="py-4 lg:py-6">
             {showImportBanner && (
               <ImportBanner
                 hideBanner={() => {
                   setShowImportBanner(false)
                 }}
               />
             )}
-            <div className="max-w-7xl mx-auto px-6 md:px-8">
+            <div className="max-w-7xl mx-auto px-6 lg:px-8">
               <Error error={error} />
               <Outlet />
             </div>

diff --git a/src/components/OwnAccountsList.tsx b/src/components/OwnAccountsList.tsx
@@ -116,16 +116,16 @@ const OwnAccountsList = ({ budget }: Props) => {
           )}
           {accounts.length ? (
             <>
-              <ul className="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3">
+              <ul className="grid grid-cols-1 gap-6 lg:grid-cols-2 2xl:grid-cols-3">
                 {accounts.map(account => (
                   <li
                     key={account.id}
                     className="col-span-1 card p-0 flex flex-col justify-between  divide-y divide-gray-200 dark:divide-gray-600"
                   >
                     <div className="flex w-full items-center justify-between space-x-6 p-6">
                       <div className="flex-1 truncate">
-                        <div className="md:flex items-start justify-between md:space-x-3">
-                          <div className="flex justify-between md:block">
+                        <div className="lg:flex items-start justify-between lg:space-x-3">
+                          <div className="flex justify-between lg:block">
                             <h3
                               className={`truncate text-base font-bold ${
                                 account.name === '' ? 'italic' : ''
@@ -145,7 +145,7 @@ const OwnAccountsList = ({ budget }: Props) => {
                                   Number(account.computedData.balance) >= 0
                                     ? 'text-lime-600'
                                     : 'text-red-600'
-                                } md:mt-2 text-lg text-right md:text-left`}
+                                } lg:mt-2 text-lg text-right lg:text-left`}
                               >
                                 <strong>
                                   {formatMoney(