Fix max zoom, + format

src/components/generic/Modal.tsx

@@ -22,7 +22,7 @@ export const Modal = ({
   return (
     <m.div className={`fixed inset-0 z-30 ${darkMode ? 'dark' : ''}`}>
       <m.div
-        className="fixed w-full h-full backdrop-blur-sm backdrop-filter"
+        className="fixed h-full w-full backdrop-blur-sm backdrop-filter"
         onClick={onClose}
       />
       <m.div className="text-center ">

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

src/pages/Map/styles.ts

@@ -52,6 +52,7 @@ export const MapStyles: MapStyleType = {
           tiles: [
             'https://clarity.maptiles.arcgis.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
           ],
+          maxzoom: 17,
         },
       },
     },

src/pages/Messages/MessageBar.tsx

@@ -32,7 +32,7 @@ export const MessageBar = ({ channelIndex }: MessageBarProps): JSX.Element => {
     }
   };
   return (
-    <div className="mx-auto flex w-full space-x-2 bg-gray-50 p-4 text-gray-500 dark:bg-transparent dark:text-gray-400">
+    <div className="mx-auto flex w-full space-x-2 bg-gray-50 p-3 text-gray-500 dark:bg-transparent dark:text-gray-400">
       <div className="mx-auto flex w-full max-w-4xl">
         <form
           className="flex w-full space-x-2"

src/pages/Messages/index.tsx

@@ -47,7 +47,7 @@ export const Messages = (): JSX.Element => {
               }}
               actions={<IconButton icon={<FiSettings />} />}
             >
-              <div className="flex w-8 h-8 bg-gray-200 rounded-full dark:bg-primaryDark dark:text-white">
+              <div className="flex h-8 w-8 rounded-full bg-gray-200 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="flex h-8 mx-2">
+                  <div className="mx-2 flex h-8">
                     {[
                       ...new Set(
                         channel.messages.flatMap(({ message }) => [
@@ -107,11 +107,11 @@ export const Messages = (): JSX.Element => {
         </div>
       }
     >
-      <div className="flex flex-col w-full">
+      <div className="flex w-full flex-col">
-        <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 w-full justify-between border-b border-gray-300 px-2 dark:border-gray-600 dark:text-gray-300">
-          <div className="flex py-2 my-auto text-sm">
+          <div className="my-auto flex gap-2 py-2 text-sm">
-            <IconButton icon={<FiHash />} />
+            <IconButton icon={<FiHash className="h-4 w-4" />} />
-            <div>
+            <div className="my-auto">
               {channels[channelIndex]?.channel.settings?.name.length
                 ? channels[channelIndex]?.channel.settings?.name
                 : channels[channelIndex]?.channel.role ===
@@ -123,7 +123,7 @@ export const Messages = (): JSX.Element => {
         </div>
         <div
           ref={chatRef}
-          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"
+          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"
         >
           <div className="mt-auto">
             {channels[channelIndex]?.messages.map((message, index) => (