スマホで見た時にテーブルが崩れないように修正

fushihara · Oct 3, 2024 · ac675d5 · ac675d5
1 parent cc3ba94
commit ac675d5
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 17 deletions.
diff --git a/src/app/_components/archiveLinkElement.tsx b/src/app/_components/archiveLinkElement.tsx
@@ -71,18 +71,18 @@ export function ArciveLinkElement(option: Option) {
       <a
         href={originalUrl}
         target="_blank"
-        className={`transition duration-300 ease-in-out hover:text-gray-900 ${className}`}
+        className={`transition duration-300 ease-in-out hover:text-gray-900 whitespace-nowrap ${className}`}
         title={officialLinkTitle}
       >公式</a>
       <a
         href={`https://web.archive.org/web/*/${originalUrl}`}
         target="_blank"
-        className={`transition duration-300 ease-in-out hover:text-gray-900 ${className}`}
+        className={`transition duration-300 ease-in-out hover:text-gray-900 whitespace-nowrap ${className}`}
         title={iaSearchResultLinkTitle}
       >IA検索結果</a>
       <Link
         href={`/iframe?src=${iframeSrc}`}
-        className={`transition duration-300 ease-in-out hover:text-gray-900 ${className}`}
+        className={`transition duration-300 ease-in-out hover:text-gray-900 whitespace-nowrap ${className}`}
         title={iframeLinkTitle}
       >IAをiframe</Link>
       {suffixPrivate}

diff --git a/src/app/_components/tableElements.tsx b/src/app/_components/tableElements.tsx
@@ -11,7 +11,7 @@ export function TableElement(mainOption: MainOption, bodyList: { element: JSX.El
   for (const h of mainOption.header) {
     const index = mainOption.header.indexOf(h);
     headerElementList.push(
-      <th scope="col" className="px-6 py-4 text-left" key={`th-${index}`}>{h.label}</th>
+      <th scope="col" className="px-6 py-4 text-left whitespace-nowrap" key={`th-${index}`}>{h.label}</th>
     );
   }
   const bodyElementList: JSX.Element[] = [];
@@ -30,15 +30,17 @@ export function TableElement(mainOption: MainOption, bodyList: { element: JSX.El
     trIndex += 1;
   }
   return (
-    <table className="w-full">
-      <thead className="bg-white border-b sticky top-0 text-md font-medium text-gray-900">
-        <tr>
-          {headerElementList}
-        </tr>
-      </thead>
-      <tbody className="">
-        {bodyElementList}
-      </tbody>
-    </table>
+    <div className="overflow-x-auto">
+      <table className="w-full">
+        <thead className="bg-white border-b sticky top-0 text-md font-medium text-gray-900">
+          <tr>
+            {headerElementList}
+          </tr>
+        </thead>
+        <tbody className="">
+          {bodyElementList}
+        </tbody>
+      </table>
+    </div>
   );
 }
diff --git a/src/app/article/_components/articleListElement.tsx b/src/app/article/_components/articleListElement.tsx
@@ -46,7 +46,7 @@ function getDisplayData(d: DisplayData, categoryTag: CategoryTagData) {
   let breadElement = (<span key={`notice`}></span>);
   if (0 < d.breadLinks.length) {
     const breadChildElement: JSX.Element[] = [];
-    breadChildElement.push(<span className="mr-[-0.5rem]" key={`label`}>パンくずリスト：</span>);
+    breadChildElement.push(<span className="mr-[-0.5rem] whitespace-nowrap" key={`label`}>パンくずリスト：</span>);
     for (const bread of d.breadLinks) {
       if (d.breadLinks.indexOf(bread) != 0) {
         breadChildElement.push(<span>＞</span>);
@@ -55,7 +55,7 @@ function getDisplayData(d: DisplayData, categoryTag: CategoryTagData) {
       breadChildElement.push(
         <Link
           href={`/article/tag/${bread}`}
-          className="transition duration-300 ease-in-out hover:text-gray-900"
+          className="transition duration-300 ease-in-out hover:text-gray-900 whitespace-nowrap"
           key={`bread-${bread}`}
         >{bread}({tagCount})</Link>
       );
@@ -79,7 +79,7 @@ function getDisplayData(d: DisplayData, categoryTag: CategoryTagData) {
       tagChildElements.push(
         <Link
           href={`/article/tag/${tag}`}
-          className="transition duration-300 ease-in-out hover:text-gray-900"
+          className="transition duration-300 ease-in-out hover:text-gray-900 whitespace-nowrap"
           key={`tag-${tag}`}
         >{tag}({tagCount})</Link>
       );