From 1bdf79b69f913206f19487a30f6f8e1559fd2b3b Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Thu, 29 Aug 2024 15:52:33 +0200
Subject: [PATCH] UI: Adjust styles for bot picker (#4875)

---
 src/components/common/Composer.scss                    |  8 +++++++-
 src/components/middle/composer/InlineBotTooltip.scss   |  1 +
 .../middle/composer/inlineResults/BaseResult.scss      | 10 +---------
 3 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/components/common/Composer.scss b/src/components/common/Composer.scss
index eea71137a..5f23b50c5 100644
--- a/src/components/common/Composer.scss
+++ b/src/components/common/Composer.scss
@@ -1,3 +1,5 @@
+@use '../../styles/mixins';
+
 .Composer {
   --base-height: 3.5rem;
 
@@ -841,7 +843,7 @@
   width: 100%;
   background: var(--color-background);
   border-radius: var(--border-radius-messages);
-  padding: 0.5rem 0;
+  padding: 0.5rem;
   max-height: 15rem;
 
   overflow-x: hidden;
@@ -854,6 +856,10 @@
   transform-origin: bottom;
   transition: opacity var(--layer-transition), transform var(--layer-transition);
 
+  scrollbar-gutter: stable;
+
+  @include mixins.adapt-padding-to-scrollbar(0.5rem);
+
   &:not(.shown) {
     display: none;
   }
diff --git a/src/components/middle/composer/InlineBotTooltip.scss b/src/components/middle/composer/InlineBotTooltip.scss
index a98bdac71..9ffa5f973 100644
--- a/src/components/middle/composer/InlineBotTooltip.scss
+++ b/src/components/middle/composer/InlineBotTooltip.scss
@@ -10,6 +10,7 @@
     grid-auto-flow: dense;
     grid-gap: 1px;
     padding: 0;
+    scrollbar-gutter: stable both-edges;
 
     @media (max-width: 600px) {
       grid-template-columns: repeat(4, 1fr);
diff --git a/src/components/middle/composer/inlineResults/BaseResult.scss b/src/components/middle/composer/inlineResults/BaseResult.scss
index cfc826013..a825ce9ab 100644
--- a/src/components/middle/composer/inlineResults/BaseResult.scss
+++ b/src/components/middle/composer/inlineResults/BaseResult.scss
@@ -1,13 +1,5 @@
 .BaseResult {
-  &.chat-item-clickable > .ListItem-button {
-    padding-left: 1.25rem !important;
-    padding-right: 1.25rem !important;
-
-    .title {
-      display: block;
-      text-overflow: ellipsis;
-    }
-  }
+  padding-bottom: 0.5rem;
 
   .thumb {
     background-color: var(--color-background-secondary);