diff --git a/src/app.scss b/src/app.scss index dead100..c481321 100644 --- a/src/app.scss +++ b/src/app.scss @@ -59,6 +59,12 @@ html { } +@media only screen and (max-width: 900px) and (min-width: 769px) { + .chat-menu-item .chat-icon { + display: none; + } +} + @media only screen and (max-width: 768px) { .navbar { display: block !important; @@ -213,6 +219,7 @@ $modal-background-background-color-dark: rgba($dark, 0.86) !default; // remove t } /* Delete button on side menu chat name */ + .menu-list { a:hover { .delete-button { @@ -220,8 +227,17 @@ $modal-background-background-color-dark: rgba($dark, 0.86) !default; // remove t background-color: initial; } } + .delete-button { + opacity: .8; + } + + .delete-button:hover { + opacity: 1; + } } + + /* Loading chat messages */ .is-loading { opacity: 0.5; @@ -277,7 +293,7 @@ $modal-background-background-color-dark: rgba($dark, 0.86) !default; // remove t .chat-menu-item { position: relative; } -.chat-menu-item span { +.chat-menu-item .chat-item-name { display: block; white-space:nowrap; overflow: hidden; @@ -429,6 +445,7 @@ aside.menu.main-menu .menu-expanse { } } } + @media only screen and (max-width: 340px) { .section-footer { .author { @@ -437,7 +454,6 @@ aside.menu.main-menu .menu-expanse { } } - .content.running-total-container { min-height:1em; // padding-bottom:.6em; diff --git a/src/lib/ChatMenuItem.svelte b/src/lib/ChatMenuItem.svelte index 2d94c08..d4eeb93 100644 --- a/src/lib/ChatMenuItem.svelte +++ b/src/lib/ChatMenuItem.svelte @@ -4,6 +4,7 @@ import { apiKeyStorage, deleteChat, pinMainMenu } from './Storage.svelte' import Fa from 'svelte-fa/src/fa.svelte' import { faTrash, faCircleCheck } from '@fortawesome/free-solid-svg-icons/index' + import { faMessage } from '@fortawesome/free-regular-svg-icons/index' export let chat:Chat export let activeChatId:number|undefined @@ -39,10 +40,10 @@