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

* fix(ui): fix notifications settings buttons overflowing

* fix(ui): fix table overflowing
pull/1917/head^2
Nicolás Espinoza 3 years ago committed by GitHub
parent 6f2db6a6cc
commit 0ce18b21ca
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -45,7 +45,7 @@ function Button<P extends ElementTypes = 'button'>(
ref?: React.Ref<Element<P>> ref?: React.Ref<Element<P>>
): JSX.Element { ): JSX.Element {
const buttonStyle = [ 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) { switch (buttonType) {
case 'primary': case 'primary':

@ -46,7 +46,7 @@ const SettingsLink: React.FC<{
if (tabType === 'button') { if (tabType === 'button') {
linkClasses = 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'; activeLinkColor = 'bg-indigo-700';
inactiveLinkColor = 'bg-gray-800 hover:bg-gray-700 focus:bg-gray-700'; inactiveLinkColor = 'bg-gray-800 hover:bg-gray-700 focus:bg-gray-700';
} }
@ -119,8 +119,8 @@ const SettingsTabs: React.FC<{
</select> </select>
</div> </div>
{tabType === 'button' ? ( {tabType === 'button' ? (
<div className="hidden overflow-x-scroll overflow-y-hidden sm:block hide-scrollbar"> <div className="hidden sm:block">
<nav className="flex space-x-4" aria-label="Tabs"> <nav className="flex flex-wrap -mx-2 -my-1" aria-label="Tabs">
{settingsRoutes.map((route, index) => ( {settingsRoutes.map((route, index) => (
<SettingsLink <SettingsLink
tabType={tabType} tabType={tabType}

@ -13,7 +13,7 @@ const TH: React.FC<AllHTMLAttributes<HTMLTableHeaderCellElement>> = ({
...props ...props
}) => { }) => {
const style = [ 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) { if (className) {
@ -39,7 +39,7 @@ const TD: React.FC<TDProps> = ({
className, className,
...props ...props
}) => { }) => {
const style = ['whitespace-nowrap text-sm leading-5 text-white']; const style = ['text-sm leading-5 text-white'];
switch (alignText) { switch (alignText) {
case 'left': case 'left':
@ -54,7 +54,7 @@ const TD: React.FC<TDProps> = ({
} }
if (!noPadding) { if (!noPadding) {
style.push('px-6 py-4'); style.push('px-4 py-4');
} }
if (className) { if (className) {
@ -73,7 +73,7 @@ const Table: React.FC = ({ children }) => {
<div className="flex flex-col"> <div className="flex flex-col">
<div className="my-2 -mx-4 overflow-x-auto md:mx-0 lg:mx-0"> <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="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> <table className="min-w-full">{children}</table>
</div> </div>
</div> </div>

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

Loading…
Cancel
Save