Modal & minor fixes

src/components/generic/Modal.tsx

@@ -4,8 +4,6 @@ import { m } from 'framer-motion';
 
 import { useAppSelector } from '@hooks/useAppSelector';
 
-// import { Backdrop } from './Backdrop';
-
 type DefaultDivProps = JSX.IntrinsicElements['div'];
 
 export interface ModalProps extends DefaultDivProps {
@@ -22,11 +20,11 @@ export const Modal = ({
   const darkMode = useAppSelector((state) => state.app.darkMode);
 
   return (
-    <m.div
-      className={`fixed inset-0 z-30 ${darkMode ? 'dark' : ''}`}
-      onClick={onClose}
-    >
-      <m.div className="fixed h-full w-full backdrop-blur-sm backdrop-filter" />
+    <m.div className={`fixed inset-0 z-30 ${darkMode ? 'dark' : ''}`}>
+      <m.div
+        className="fixed w-full h-full backdrop-blur-sm backdrop-filter"
+        onClick={onClose}
+      />
       <m.div className="text-center ">
         <span
           className="inline-block h-screen align-middle "

src/components/layout/Sidebar/sections/SidebarOverlay.tsx

@@ -22,14 +22,14 @@ export const SidebarOverlay = ({
     <AnimatePresence>
       {open && (
         <m.div
-          className="absolute z-20 flex h-full w-full flex-col bg-primaryDark"
+          className="absolute z-20 flex flex-col w-full h-full bg-primaryDark"
           animate={{ translateX: 0 }}
           initial={{ translateX: '-100%' }}
           exit={{ translateX: '-100%' }}
           transition={{ type: 'just' }}
         >
           <AnimateSharedLayout>
-            <div className="flex gap-2 p-2">
+            <div className="flex gap-2 p-2 border-b border-gray-300 dark:border-gray-600">
               <IconButton
                 onClick={(): void => {
                   close();

src/components/layout/index.tsx

@@ -23,7 +23,7 @@ export const Layout = ({
   return (
     <div className="flex w-full bg-gray-100 dark:bg-secondaryDark md:overflow-hidden md:shadow-xl">
       <Sidebar>
-        <div className="flex gap-2 border-b border-gray-300 p-2 dark:border-gray-600">
+        <div className="flex gap-2 p-2 border-b border-gray-300 dark:border-gray-600">
           <IconButton icon={icon} />
           <div className="my-auto text-lg font-medium dark:text-white">
             {title}

src/pages/Extensions/Info.tsx

@@ -21,21 +21,21 @@ export const Info = (): JSX.Element => {
   );
 
   return (
-    <div className="flex w-full select-none flex-col gap-4 p-4">
+    <div className="flex flex-col flex-grow w-full gap-4 p-4 select-none">
       <m.div
         whileHover={{ scale: 1.01 }}
-        className="flex w-full flex-col gap-4 rounded-md p-8 shadow-md dark:bg-primaryDark"
+        className="flex flex-col w-full gap-4 p-8 rounded-md shadow-md dark:bg-primaryDark"
       >
         <div className="m-auto">
           <Hashicon value={hardwareInfo.myNodeNum.toString()} size={180} />
         </div>
-        <div className="text-center text-lg font-medium dark:text-white">
+        <div className="text-lg font-medium text-center dark:text-white">
           {node?.user?.longName || 'Unknown'}
         </div>
       </m.div>
 
-      <div className="rounded-md p-8 shadow-md dark:bg-primaryDark">
-        <JSONPretty data={hardwareInfo} />
+      <div className="flex-grow p-8 rounded-md shadow-md dark:bg-primaryDark">
+        <JSONPretty className="overflow-y-auto" data={hardwareInfo} />
       </div>
     </div>
   );

src/pages/Messages/index.tsx

@@ -37,7 +37,7 @@ export const Messages = (): JSX.Element => {
       title="Message Groups"
       icon={<FiMessageCircle />}
       sidebarContents={
-        <div className="flex flex-col  gap-2">
+        <div className="flex flex-col gap-2">
           {channels.map((channel) => (
             <SidebarItem
               key={channel.channel.index}
@@ -47,7 +47,7 @@ export const Messages = (): JSX.Element => {
               }}
               actions={<IconButton icon={<FiSettings />} />}
             >
-              <div className="flex h-8 w-8 rounded-full bg-gray-200 dark:bg-primaryDark dark:text-white">
+              <div className="flex w-8 h-8 bg-gray-200 rounded-full dark:bg-primaryDark dark:text-white">
                 <div className="m-auto">
                   {channel.channel.role === Protobuf.Channel_Role.PRIMARY ? (
                     <MdPublic />
@@ -64,7 +64,7 @@ export const Messages = (): JSX.Element => {
               </div>
               {channel.messages.length ? (
                 <>
-                  <div className="mx-2 flex h-8">
+                  <div className="flex h-8 mx-2">
                     {[
                       ...new Set(
                         channel.messages.flatMap(({ message }) => [
@@ -107,10 +107,10 @@ export const Messages = (): JSX.Element => {
         </div>
       }
     >
-      <div className="flex w-full flex-col">
-        <div className="flex w-full justify-between border-b border-gray-300 px-2 dark:border-gray-600 dark:text-gray-300">
-          <div className="my-auto flex py-2 text-sm">
-            <FiHash className="my-auto mr-1 h-4 w-4" />
+      <div className="flex flex-col w-full">
+        <div className="flex justify-between w-full px-2 border-b border-gray-300 dark:border-gray-600 dark:text-gray-300">
+          <div className="flex py-2 my-auto text-sm">
+            <IconButton icon={<FiHash />} />
             <div>
               {channels[channelIndex]?.channel.settings?.name.length
                 ? channels[channelIndex]?.channel.settings?.name
@@ -123,7 +123,7 @@ export const Messages = (): JSX.Element => {
         </div>
         <div
           ref={chatRef}
-          className="flex flex-grow flex-col space-y-2 overflow-y-auto border-b border-gray-300 bg-white pb-6 dark:border-gray-600 dark:bg-secondaryDark"
+          className="flex flex-col flex-grow pb-6 space-y-2 overflow-y-auto bg-white border-b border-gray-300 dark:border-gray-600 dark:bg-secondaryDark"
         >
           <div className="mt-auto">
             {channels[channelIndex]?.messages.map((message, index) => (