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>
 )