Merge pull request #106 from yamanoku/fix-account-field-table-style

Fix: Responsive issue with `account.fieldHtmls` table

Author: dahlia

CHANGES.md

@@ -25,6 +25,10 @@ To be released.
  -  On profile page, images are no more captioned using `<figcaption>` but
     use only `alt` attribute for accessibility.  [[#99], [#100] by Okuto Oyama]
 
+ -  Fixed a style bug where horizontal scrolling occurred when the screen
+    size was reduced when there were many custom fields on profile page.
+    [[#106] by Okuto Oyama]
+
  -  Added `ALLOW_HTML` environment variable to allow raw HTML inside Markdown.
     This is useful for allowing users to use broader formatting options outside
     of Markdown, but to avoid XSS attacks, it is still limited to a subset of
@@ -33,6 +37,7 @@ To be released.
 [#99]: https://github.com/fedify-dev/hollo/issues/99
 [#100]: https://github.com/fedify-dev/hollo/pull/100
 [#103]: https://github.com/fedify-dev/hollo/issues/103
+[#106]: https://github.com/fedify-dev/hollo/pull/106
 [`GET /api/v1/mutes`]: https://docs.joinmastodon.org/methods/mutes/#get
 [`GET /api/v1/blocks`]: https://docs.joinmastodon.org/methods/blocks/#get
 

src/components/Profile.tsx

@@ -52,25 +52,27 @@ export function Profile({ accountOwner }: ProfileProps) {
       {/* biome-ignore lint/security/noDangerouslySetInnerHtml: no xss */}
       <div dangerouslySetInnerHTML={{ __html: bioHtml }} />
       {account.fieldHtmls && (
-        <table>
-          <thead>
-            <tr>
-              {Object.keys(account.fieldHtmls).map((key) => (
-                <th>{key}</th>
-              ))}
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              {Object.values(account.fieldHtmls).map((value) => (
-                <td
-                  // biome-ignore lint/security/noDangerouslySetInnerHtml: no xss
-                  dangerouslySetInnerHTML={{ __html: value }}
-                />
-              ))}
-            </tr>
-          </tbody>
-        </table>
+        <div class="overflow-auto">
+          <table>
+            <thead>
+              <tr>
+                {Object.keys(account.fieldHtmls).map((key) => (
+                  <th>{key}</th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                {Object.values(account.fieldHtmls).map((value) => (
+                  <td
+                    // biome-ignore lint/security/noDangerouslySetInnerHtml: no xss
+                    dangerouslySetInnerHTML={{ __html: value }}
+                  />
+                ))}
+              </tr>
+            </tbody>
+          </table>
+        </div>
       )}
     </div>
   );