Fix some style issuesv0.9.8-beta.1

5 files changed, 9 insertions, 3 deletions

diff --git a/frontend/src/App/notification.scss b/frontend/src/App/notification.scss
index 226c9bb71..88f73d6b4 100644
--- a/frontend/src/App/notification.scss
+++ b/frontend/src/App/notification.scss
@@ -18,8 +18,8 @@
 
   .dropdown-menu {
     max-width: 20rem;
-    max-height: 40rem;
-    overflow-y: scroll;
+    max-height: 85vh;
+    overflow-y: auto;
   }
 
   $content-width: 16rem;
diff --git a/frontend/src/System/Releases/index.tsx b/frontend/src/System/Releases/index.tsx
index 1e4cb857f..8662840e3 100644
--- a/frontend/src/System/Releases/index.tsx
+++ b/frontend/src/System/Releases/index.tsx
@@ -11,7 +11,7 @@ const ReleasesView: FunctionComponent<Props> = () => {
   const releases = useSystemReleases();
 
   return (
-    <Container fluid className="px-5 py-4 bg-light">
+    <Container fluid className="px-3 py-4 bg-light">
       <Helmet>
         <title>Releases - Bazarr (System)</title>
       </Helmet>
diff --git a/frontend/src/System/Status/index.tsx b/frontend/src/System/Status/index.tsx
index 9db1380ef..44573f6ef 100644
--- a/frontend/src/System/Status/index.tsx
+++ b/frontend/src/System/Status/index.tsx
@@ -12,6 +12,7 @@ import { Helmet } from "react-helmet";
 import { useSystemHealth, useSystemStatus } from "../../@redux/hooks";
 import { AsyncOverlay } from "../../components";
 import { GithubRepoRoot } from "../../constants";
+import "./style.scss";
 import Table from "./table";
 
 interface InfoProps {
diff --git a/frontend/src/System/Status/style.scss b/frontend/src/System/Status/style.scss
new file mode 100644
index 000000000..b3f9bbe50
--- /dev/null
+++ b/frontend/src/System/Status/style.scss
@@ -0,0 +1,3 @@
+.status-issue {
+  min-width: 16rem;
+}
diff --git a/frontend/src/System/Status/table.tsx b/frontend/src/System/Status/table.tsx
index b157d9378..254600deb 100644
--- a/frontend/src/System/Status/table.tsx
+++ b/frontend/src/System/Status/table.tsx
@@ -16,6 +16,7 @@ const Table: FunctionComponent<Props> = ({ health }) => {
       {
         Header: "Issue",
         accessor: "issue",
+        className: "status-issue",
       },
     ],
     []
@@ -23,6 +24,7 @@ const Table: FunctionComponent<Props> = ({ health }) => {
 
   return (
     <SimpleTable
+      responsive
       columns={columns}
       data={health}
       emptyText="No issues with your configuration"