nicholas/storage-manager#1: adjust styles

client/src/app.tsx

@@ -112,6 +112,7 @@ const App = () => {
         onSubmitBox={handleCreateBox}
         onClose={handleBoxFormModalClose}
       />
+      <div className='page-content'>
 
         <div className="utility-container">
           <button onClick={handleBoxFormModalOpen} className="group button-icon">
@@ -149,7 +150,9 @@ const App = () => {
             ))}
           </div>
         </div>
+      </div>
     </>
+
   );
 };
 

client/src/features/box/components/BoxFormModal.tsx

@@ -80,7 +80,7 @@ export const BoxFormModal: React.FC<BoxFormModalProps> = ({
             name="description"
             type="text"
           />
-          <div>
+          <div className='actions'>
             <button className="button" type="submit">
               Submit
             </button>

client/src/features/item/components/ItemFormModal.tsx

@@ -109,7 +109,7 @@ export const ItemFormModal: React.FC<ItemFormModalProps> = ({
             type="number"
           />
 
-          <div>
+          <div className='actions'>
             {mode !== "readonly" && <button className="button" type="submit">
               Submit
             </button>}

client/src/index.css

@@ -24,6 +24,10 @@ code {
   --color-subdued: #b3b3b3;
 }
 
+.page-content {
+  @apply flex-col p-4;
+}
+
 .scrollbar-minimal::-webkit-scrollbar {
   @apply h-1 w-1;
 }
@@ -52,16 +56,16 @@ html {
 }
 
 .box-card-list-container {
-  @apply flex p-4;
+  @apply flex;
 }
 .box-card-list {
-  @apply m-0 flex flex-wrap space-x-4 p-0 items-start;
+  @apply m-0 w-full flex flex-wrap p-0 items-start;
 }
 .box-card-container {
-  @apply box-border;
+  @apply max-w-md w-full;
 }
 .box-card {
-  @apply grid grid-rows-[auto_1fr_auto] m-2 min-h-64 max-h-128 min-w-sm rounded-md bg-base p-4 text-subdued;
+  @apply grid grid-rows-[auto_1fr_auto] m-2 min-h-64 max-h-128 min-w-[320px] max-w-full rounded-md bg-base p-4 text-subdued;
 }
 .overlay {
   @apply absolute inset-0 bg-black opacity-50 z-10 border-dashed border-2 border-subdued hover:border-green-300 hover:cursor-pointer;
@@ -76,7 +80,7 @@ html {
   @apply mb-4 text-sm font-semibold text-subdued;
 }
 .menu {
-  @apply z-50 flex items-center relative;
+  @apply z-40 flex items-center relative;
 }
 .menu-list-container {
   @apply absolute right-0 z-10 mt-2 w-36 rounded bg-highlight p-1 shadow-lg;
@@ -99,7 +103,6 @@ html {
   @apply max-h-64 overflow-y-auto;
 }
 .item-card-list {
-  @apply mr-2;
 }
 .item-container {
   @apply flex justify-between align-middle rounded-sm px-2 hover:bg-highlight;
@@ -111,10 +114,10 @@ html {
   @apply cursor-default;
 }
 .modal-container {
-  @apply fixed inset-0 z-20 flex items-center justify-center bg-black/80;
+  @apply fixed inset-0 z-50 flex items-center justify-center bg-black/80;
 }
 .modal {
-  @apply w-full max-w-lg rounded-xl bg-highlight p-6;
+  @apply w-full max-w-lg rounded-xl bg-highlight p-6 m-6;
 }
 
 .input-label {
@@ -124,7 +127,7 @@ html {
   @apply mt-1 w-full rounded-sm border border-gray-300 p-2 focus:ring-2 focus:ring-blue-500;
 }
 .button {
-  @apply rounded-sm bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:outline-none;
+  @apply rounded-sm bg-base px-4 py-2 text-white hover:bg-highlight-2 hover:cursor-pointer focus:ring-2 focus:ring-blue-500 focus:outline-none;
 }
 
 .search-container {
@@ -140,5 +143,5 @@ html {
 }
 
 .actions {
-  @apply mt-4;
+  @apply mt-4 flex gap-1;
 }