fix: styling issues with table in history page

thedevs-network · Jun 24, 2021 · 16e65b8 · 16e65b8
1 parent 6e689f2
commit 16e65b8
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 14 deletions.
diff --git a/source/History/History.tsx b/source/History/History.tsx
@@ -129,8 +129,8 @@ const History: React.FC = () => {
 
   return (
     <BodyWrapper>
-      <div id="history" tw="h-screen flex justify-center px-6 py-8 bg-gray-200">
-        <div>
+      <div id="history" tw="h-screen bg-gray-200">
+        <div tw={'overflow-x-hidden px-6 py-8'}>
           <Header />
 
           {/* eslint-disable-next-line no-nested-ternary */}

diff --git a/source/History/Table.tsx b/source/History/Table.tsx
@@ -79,7 +79,7 @@ const Table: React.FC = () => {
     <>
       <div
         css={[
-          tw` flex flex-col items-center w-full min-h-screen`,
+          tw` flex flex-col items-center w-full min-h-screen mt-5 mb-3`,
 
           css`
             flex: 0 0 auto;
@@ -88,7 +88,7 @@ const Table: React.FC = () => {
       >
         <div
           css={[
-            tw`flex flex-col mx-0 mt-10 mb-32`,
+            tw`flex flex-col mx-0`,
 
             css`
               width: 1200px;
@@ -97,15 +97,7 @@ const Table: React.FC = () => {
           ]}
         >
           <div tw="flex items-center justify-center">
-            <h2
-              css={[
-                tw`mx-0 text-xl`,
-
-                css`
-                  margin-right: 0.8rem;
-                `,
-              ]}
-            >
+            <h2 css={[tw`mx-0 text-xl mb-5`]}>
               Recent shortened links. (last {MAX_HISTORY_ITEMS} results)
             </h2>
           </div>
@@ -170,7 +162,7 @@ const Table: React.FC = () => {
                     <tr
                       key={item.id}
                       css={[
-                        tw`flex justify-between flex-auto px-6 py-0`,
+                        tw`flex justify-between flex-auto px-5 py-0`,
 
                         css`
                           border-bottom: 1px solid rgb(234, 234, 234);