fix: style for small screen

This commit is contained in:
Felix Roos 2023-12-10 19:50:20 +01:00
parent 59a4cd9cf8
commit 79e8e430f1
3 changed files with 3 additions and 3 deletions

View File

@ -9,7 +9,7 @@ export function ButtonGroup({ value, onChange, items }) {
key={key}
onClick={() => onChange(key)}
className={cx(
'px-2 border-b h-8',
'px-2 border-b h-8 whitespace-nowrap',
// i === 0 && 'rounded-l-md',
// i === arr.length - 1 && 'rounded-r-md',
// value === key ? 'bg-background' : 'bg-lineHighlight',

View File

@ -21,7 +21,7 @@ export default function ImportSoundsButton({ onComplete }) {
return (
<label
style={{ alignItems: 'center' }}
className="flex bg-background ml-2 pl-2 pr-2 max-w-[300px] rounded-md hover:opacity-50"
className="flex bg-background ml-2 pl-2 pr-2 max-w-[300px] rounded-md hover:opacity-50 whitespace-nowrap cursor-pointer"
>
<input
disabled={isUploading}

View File

@ -44,7 +44,7 @@ export function SoundsTab() {
});
return (
<div id="sounds-tab" className="px-4 flex flex-col w-full h-full dark:text-white text-stone-900">
<div className="pb-2 flex">
<div className="pb-2 flex shrink-0 overflow-auto">
<ButtonGroup
value={soundsFilter}
onChange={(value) => settingsMap.setKey('soundsFilter', value)}