shpaq/sct-overseerr
1
0
Fork 0
mirror of https://github.com/sct/overseerr.git synced 2025-09-17 17:24:35 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): fix notifications settings buttons overflowing (#1911)

Browse Source 
* fix(ui): fix notifications settings buttons overflowing

* fix(ui): fix table overflowing
This commit is contained in:
Nicolás Espinoza
2021-08-09 17:44:29 +09:00
committed by GitHub
parent 6f2db6a6cc
commit 0ce18b21ca
4 changed files with 15 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Common/Button/index.tsx
View File

@@ -45,7 +45,7 @@ function Button<P extends ElementTypes = 'button'>(
ref?: React.Ref<Element<P>>
): JSX.Element {
const buttonStyle = [
'inline-flex items-center justify-center border border-transparent leading-5 font-medium rounded-md focus:outline-none transition ease-in-out duration-150 cursor-pointer disabled:opacity-50',
'inline-flex items-center justify-center border border-transparent leading-5 font-medium rounded-md focus:outline-none transition ease-in-out duration-150 cursor-pointer disabled:opacity-50 whitespace-nowrap',
];
switch (buttonType) {
case 'primary':

6
src/components/Common/SettingsTabs/index.tsx
View File

@@ -46,7 +46,7 @@ const SettingsLink: React.FC<{
if (tabType === 'button') {
linkClasses =
'px-3 py-2 ml-8 text-sm font-medium transition duration-300 rounded-md whitespace-nowrap first:ml-0';
'px-3 py-2 text-sm font-medium transition duration-300 rounded-md whitespace-nowrap mx-2 my-1';
activeLinkColor = 'bg-indigo-700';
inactiveLinkColor = 'bg-gray-800 hover:bg-gray-700 focus:bg-gray-700';
}
@@ -119,8 +119,8 @@ const SettingsTabs: React.FC<{
</select>
</div>
{tabType === 'button' ? (
<div className="hidden overflow-x-scroll overflow-y-hidden sm:block hide-scrollbar">
<nav className="flex space-x-4" aria-label="Tabs">
<div className="hidden sm:block">
<nav className="flex flex-wrap -mx-2 -my-1" aria-label="Tabs">
{settingsRoutes.map((route, index) => (
<SettingsLink
tabType={tabType}

8
src/components/Common/Table/index.tsx
View File

@@ -13,7 +13,7 @@ const TH: React.FC<AllHTMLAttributes<HTMLTableHeaderCellElement>> = ({
...props
}) => {
const style = [
'px-6 py-3 bg-gray-500 text-left text-xs leading-4 font-medium text-gray-200 uppercase tracking-wider',
'px-4 py-3 bg-gray-500 text-left text-xs leading-4 font-medium text-gray-200 uppercase tracking-wider truncate',
];
if (className) {
@@ -39,7 +39,7 @@ const TD: React.FC<TDProps> = ({
className,
...props
}) => {
const style = ['whitespace-nowrap text-sm leading-5 text-white'];
const style = ['text-sm leading-5 text-white'];
switch (alignText) {
case 'left':
@@ -54,7 +54,7 @@ const TD: React.FC<TDProps> = ({
}
if (!noPadding) {
style.push('px-6 py-4');
style.push('px-4 py-4');
}
if (className) {
@@ -73,7 +73,7 @@ const Table: React.FC = ({ children }) => {
<div className="flex flex-col">
<div className="my-2 -mx-4 overflow-x-auto md:mx-0 lg:mx-0">
<div className="inline-block min-w-full py-2 align-middle">
<div className="overflow-hidden shadow sm:rounded-lg">
<div className="overflow-hidden rounded-lg shadow md:mx-0 lg:mx-0">
<table className="min-w-full">{children}</table>
</div>
</div>

13
src/components/Settings/SettingsLogs/index.tsx
View File

@@ -323,13 +323,13 @@ const SettingsLogs: React.FC = () => {
</Table.TD>
<Table.TD className="text-gray-300">{row.label}</Table.TD>
<Table.TD className="text-gray-300">{row.message}</Table.TD>
<Table.TD className="flex items-center justify-end">
<Table.TD className="flex flex-wrap items-center justify-end -m-1">
{row.data && (
<Button
buttonType="primary"
buttonSize="sm"
onClick={() => setActiveLog(row)}
className="mr-2"
className="m-1"
>
<DocumentSearchIcon className="icon-md" />
</Button>
@@ -338,6 +338,7 @@ const SettingsLogs: React.FC = () => {
buttonType="primary"
buttonSize="sm"
onClick={() => copyLogString(row)}
className="m-1"
>
<ClipboardCopyIcon className="icon-md" />
</Button>
@@ -349,7 +350,7 @@ const SettingsLogs: React.FC = () => {
{data.results.length === 0 && (
<tr className="relative h-24 p-2 text-white">
<Table.TD colSpan={5} noPadding>
<div className="flex flex-col items-center justify-center w-screen p-6 lg:w-full">
<div className="flex flex-col items-center justify-center w-screen p-6 md:w-full">
<span className="text-base">
{intl.formatMessage(globalMessages.noresults)}
</span>
@@ -371,7 +372,7 @@ const SettingsLogs: React.FC = () => {
<tr className="bg-gray-700">
<Table.TD colSpan={5} noPadding>
<nav
className="flex flex-col items-center w-screen px-6 py-3 space-x-4 space-y-3 sm:space-y-0 sm:flex-row lg:w-full"
className="flex flex-col items-center w-screen px-6 py-3 space-x-4 space-y-3 sm:space-y-0 sm:flex-row md:w-full"
aria-label="Pagination"
>
<div className="hidden lg:flex lg:flex-1">
@@ -391,8 +392,8 @@ const SettingsLogs: React.FC = () => {
})}
</p>
</div>
<div className="flex justify-center sm:flex-1 sm:justify-start lg:justify-center">
<span className="items-center -mt-3 text-sm sm:-ml-4 lg:ml-0 sm:mt-0">
<div className="flex justify-center sm:flex-1 sm:justify-start md:justify-center">
<span className="items-center -mt-3 text-sm sm:-ml-4 md:ml-0 sm:mt-0">
{intl.formatMessage(globalMessages.resultsperpage, {
pageSize: (
<select