chore: responsive fixes

FuelLabs · Oct 4, 2024 · c0f6390 · c0f6390
1 parent bd4fadf
commit c0f6390
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 21 deletions.
diff --git a/packages/app-explorer/src/systems/Block/components/BlockItem.tsx b/packages/app-explorer/src/systems/Block/components/BlockItem.tsx
@@ -8,7 +8,7 @@ export interface BlockItemProps {
 
 export default function BlockItem({ blockId, ethValue }: BlockItemProps) {
   return (
-    <VStack gap="1">
+    <VStack>
       <HStack gap={'0'}>
         <Box>
           <Copyable
@@ -19,8 +19,8 @@ export default function BlockItem({ blockId, ethValue }: BlockItemProps) {
           </Copyable>
         </Box>
       </HStack>
-      <Link className="w-full justify-center" href={`/block/${blockId}/simple`}>
-        <div className="flex sm:hidden items-center gap-2">
+      <Link href={`/block/${blockId}/simple`}>
+        <div className="flex sm:hidden items-center gap-0">
           {
             <svg
               xmlns="http://www.w3.org/2000/svg"

diff --git a/packages/app-explorer/src/systems/Block/components/BlockTimeItem.tsx b/packages/app-explorer/src/systems/Block/components/BlockTimeItem.tsx
@@ -1,29 +1,23 @@
-import { Text, VStack } from '@fuels/ui';
+import { Text, VStack, useBreakpoints } from '@fuels/ui';
 
 type BlockTimeItemProps = {
   timeAgo: string;
 };
 
 export default function BlockTimeItem({ timeAgo }: BlockTimeItemProps) {
-  // const timeDate = new Date(time);
-
-  // const formattedTime = timeDate.toLocaleString('en-US', {
-  //   year: 'numeric',
-  //   month: 'short',
-  //   day: 'numeric',
-  //   hour: 'numeric',
-  //   minute: 'numeric',
-  //   hour12: true,
-  // });
+  const { isMobile } = useBreakpoints();
 
   return (
     <VStack gap="0px">
-      <Text className="text-[0.7rem] m-0 text-center whitespace-nowrap">
+      <Text
+        className={
+          isMobile
+            ? 'text-[0.7rem] pr-[0px] text-end whitespace-nowrap'
+            : 'text-[0.7rem]  text-center whitespace-nowrap'
+        }
+      >
         {timeAgo}
       </Text>
-      {/* <Text className="text-[0.7rem] p-0 m-0 text-[#9f9f9f] whitespace-nowrap">
-        {formattedTime}
-      </Text> */}
     </VStack>
   );
 }
diff --git a/packages/app-explorer/src/systems/Block/components/BlocksTable.tsx b/packages/app-explorer/src/systems/Block/components/BlocksTable.tsx
@@ -39,7 +39,14 @@ function BlocksTable({
           10 ** 9
         ).toString();
         return (
-          <BlockItem blockId={row.node.header.height} ethValue={totalGasUsed} />
+          <>
+            <div className="w-full flex justify-start px-[16px] items-center">
+              <BlockItem
+                blockId={row.node.header.height}
+                ethValue={totalGasUsed}
+              />
+            </div>
+          </>
         );
       },
       sortable: false,

diff --git a/packages/app-explorer/src/systems/Block/screens/BlockScreen.tsx b/packages/app-explorer/src/systems/Block/screens/BlockScreen.tsx
@@ -94,7 +94,7 @@ export const BlocksScreen = () => {
   }, [currentCursor, dir]);
 
   return (
-    <VStack>
+    <VStack p={'1'}>
       <Hero />
       <LoadingWrapper
         isLoading={loading}
@@ -103,7 +103,7 @@ export const BlocksScreen = () => {
             {[...Array(10)].map((_, index) => (
               <LoadingBox
                 key={index}
-                className="w-full md:w-[50rem] lg:w-[71rem] h-[3.5rem] mx-auto rounded-lg my-1"
+                className="w-full h-[3.5rem]  rounded-lg"
               />
             ))}
           </>