Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2026-01-27 20:56:12 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

style: Minor Beta UI fixes (#1197)

Browse source 
* style(Header): hide scrollbar but still allow side scroll/swipe/drag/touch

* feat: make menu buttons flexiblewith min-width, delete passed in classes, add pointer-cursor

* refactor: use conditional for visibility of plugins settings

* fix: make advanced settings popover appear over nav

* refactor(textarea): minor padding restyling, add max height

* style: make menuItem checkmark invisible instead of hidden so it takes up width space

* style: make presetsMenu trigger an icon button, remove max-width of presets except in mobile view

* style: improve advanced settings mobile styling

* feat: newchat and convo items toggle nav on small screens

* style: improve no presets view

* style: make sure toggle hover effect does not apply on smaller screens
This commit is contained in:
Danny Avila 2023-11-17 08:00:42 -05:00 • committed by GitHub
parent c64970525b
commit 1ba8d4ffa9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 171 additions and 92 deletions
Download patch file Download diff file Expand all files Collapse all files

20
client/src/components/Chat/Menus/Presets/PresetItems.tsx
View file

@ -59,7 +59,20 @@ const PresetItems: FC<{
</Dialog>
</div>
</div>
{presets && presets.length === 0 && (
<div
role="menuitem"
className="pointer-none group m-1.5 flex h-8 min-w-[170px] gap-2 rounded px-5 py-2.5 !pr-3 text-sm !opacity-100 hover:bg-black/5 focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-white/5 md:min-w-[240px]"
tabIndex={-1}
>
<div className="flex h-full grow items-center justify-end gap-2">
{/* TODO: Create Preset from here */}
{localize('com_endpoint_no_presets')}
</div>
</div>
)}
{presets &&
presets.length > 0 &&
presets.map((preset, i) => {
if (!preset) {
return null;
@ -70,8 +83,7 @@ const PresetItems: FC<{
<div key={`preset-${preset.presetId}`}>
<MenuItem
key={`preset-item-${preset.presetId}`}
className="w-[380px] md:min-w-[240px]"
textClassName="text-xs max-w-[180px] md:max-w-[250px]"
textClassName="text-xs max-w-[200px] truncate md:max-w-full "
title={getPresetTitle(preset)}
disableHover={true}
onClick={() => onSelectPreset(preset)}
@ -83,7 +95,7 @@ const PresetItems: FC<{
>
<div className="flex h-full items-center justify-end gap-1">
<button
className="m-0 h-full rounded-md px-4 text-gray-400 hover:text-gray-700 dark:bg-gray-700 dark:text-gray-400 dark:hover:text-gray-200 sm:invisible sm:p-2 sm:group-hover:visible"
className="m-0 h-full rounded-md p-2 px-4 text-gray-400 hover:text-gray-700 dark:bg-gray-700 dark:text-gray-400 dark:hover:text-gray-200 sm:invisible sm:group-hover:visible"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
@ -93,7 +105,7 @@ const PresetItems: FC<{
<TrashIcon />
</button>
<button
className="m-0 h-full rounded-md px-4 text-gray-400 hover:text-gray-700 dark:bg-gray-700 dark:text-gray-400 dark:hover:text-gray-200 sm:invisible sm:p-2 sm:group-hover:visible"
className="m-0 h-full rounded-md p-2 px-4 text-gray-400 hover:text-gray-700 dark:bg-gray-700 dark:text-gray-400 dark:hover:text-gray-200 sm:invisible sm:group-hover:visible"
onClick={(e) => {
e.preventDefault();
onChangePreset(preset);