fix(css): simplifying table

pmndrs · Aug 17, 2024 · ab7fbd6 · ab7fbd6
1 parent 3297709
commit ab7fbd6
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 26 deletions.
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -103,10 +103,6 @@ summary {
   @apply select-none cursor-pointer mb-2 -ml-4;
 }
 
-table {
-  min-width: 600px;
-}
-
 th {
   @apply px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wide;
 }
@@ -124,26 +120,13 @@ tbody tr:nth-child(odd) {
 }
 
 td {
-  @apply px-6 py-4 text-sm text-gray-900 dark:text-gray-300 break-all;
-  max-width: 150px;
-  white-space: pre-wrap;
-  word-break: break-word;
+  @apply px-6 py-4 text-sm text-gray-900 dark:text-gray-300;
 }
 
 td:first-child {
   @apply font-medium;
 }
 
-@media (max-width: 600px) {
-  table {
-    min-width: auto;
-  }
-
-  table td {
-    max-width: 100%;
-  }
-}
-
 .grid-list li {
   @apply text-base text-gray-700;
   font-size: 0.9375rem;

diff --git a/src/components/mdx/index.tsx b/src/components/mdx/index.tsx
@@ -38,14 +38,8 @@ export const blockquote = ({ children }: { children: React.ReactNode }) => (
 )
 
 export const table = ({ children }: { children: React.ReactNode }) => (
-  <div className="flex flex-col my-6">
-    <div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
-      <div className="py-6 align-middle inline-block min-w-full sm:px-6 lg:px-8">
-        <div className="shadow-lg overflow-hidden border-b border-gray-200 sm:rounded-lg dark:border-gray-700">
-          <table className="divide-y divide-gray-200 w-full dark:divide-gray-700">{children}</table>
-        </div>
-      </div>
-    </div>
+  <div className="my-8 overflow-auto rounded-lg border-gray-200 border dark:border-gray-700">
+    <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">{children}</table>
   </div>
 )