From eff4568f7206c68e5b5b882d966185fc22938803 Mon Sep 17 00:00:00 2001
From: Anderson Shindy Oki <anderson.vs.oki@gmail.com>
Date: Wed, 17 Apr 2024 11:54:07 +0900
Subject: [PATCH] no log: table overflow wrapper specific to upload modal
 (#2459)

* fix: table overflow wrapper specific to upload modal

* chore: apply prettier
---
 frontend/src/components/forms/MovieUploadForm.tsx  | 12 +++++++++++-
 frontend/src/components/forms/SeriesUploadForm.tsx | 12 +++++++++++-
 frontend/src/components/tables/BaseTable.tsx       |  1 -
 3 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/forms/MovieUploadForm.tsx b/frontend/src/components/forms/MovieUploadForm.tsx
index fbcb0b04f..b51614770 100644
--- a/frontend/src/components/forms/MovieUploadForm.tsx
+++ b/frontend/src/components/forms/MovieUploadForm.tsx
@@ -19,6 +19,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   Button,
   Checkbox,
+  createStyles,
   Divider,
   MantineColor,
   Stack,
@@ -78,12 +79,21 @@ interface Props {
   onComplete?: () => void;
 }
 
+const useStyles = createStyles((theme) => {
+  return {
+    wrapper: {
+      overflowWrap: "anywhere",
+    },
+  };
+});
+
 const MovieUploadForm: FunctionComponent<Props> = ({
   files,
   movie,
   onComplete,
 }) => {
   const modals = useModals();
+  const { classes } = useStyles();
 
   const profile = useLanguageProfileBy(movie.profileId);
 
@@ -279,7 +289,7 @@ const MovieUploadForm: FunctionComponent<Props> = ({
         modals.closeSelf();
       })}
     >
-      <Stack>
+      <Stack className={classes.wrapper}>
         <SimpleTable columns={columns} data={form.values.files}></SimpleTable>
         <Divider></Divider>
         <Button type="submit">Upload</Button>
diff --git a/frontend/src/components/forms/SeriesUploadForm.tsx b/frontend/src/components/forms/SeriesUploadForm.tsx
index 784baf8a5..5ce9c821a 100644
--- a/frontend/src/components/forms/SeriesUploadForm.tsx
+++ b/frontend/src/components/forms/SeriesUploadForm.tsx
@@ -23,6 +23,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   Button,
   Checkbox,
+  createStyles,
   Divider,
   MantineColor,
   Stack,
@@ -85,12 +86,21 @@ interface Props {
   onComplete?: VoidFunction;
 }
 
+const useStyles = createStyles((theme) => {
+  return {
+    wrapper: {
+      overflowWrap: "anywhere",
+    },
+  };
+});
+
 const SeriesUploadForm: FunctionComponent<Props> = ({
   series,
   files,
   onComplete,
 }) => {
   const modals = useModals();
+  const { classes } = useStyles();
   const episodes = useEpisodesBySeriesId(series.sonarrSeriesId);
   const episodeOptions = useSelectorOptions(
     episodes.data ?? [],
@@ -358,7 +368,7 @@ const SeriesUploadForm: FunctionComponent<Props> = ({
         modals.closeSelf();
       })}
     >
-      <Stack>
+      <Stack className={classes.wrapper}>
         <SimpleTable columns={columns} data={form.values.files}></SimpleTable>
         <Divider></Divider>
         <Button type="submit">Upload</Button>
diff --git a/frontend/src/components/tables/BaseTable.tsx b/frontend/src/components/tables/BaseTable.tsx
index e41a2d313..6ec49e61a 100644
--- a/frontend/src/components/tables/BaseTable.tsx
+++ b/frontend/src/components/tables/BaseTable.tsx
@@ -24,7 +24,6 @@ const useStyles = createStyles((theme) => {
       display: "block",
       maxWidth: "100%",
       overflowX: "auto",
-      overflowWrap: "anywhere",
     },
     table: {
       borderCollapse: "collapse",