fix hit area for leo conversations list (#26793)

* fix hit area for leo conversations list * Increase size of emoji in suggested question Increase size of the emoji to match figma * Update components/ai_chat/resources/page/components/suggested_question/style.module.scss Co-authored-by: Jay Harris <[email protected]> * Update components/ai_chat/resources/page/components/conversations_list/style.module.scss Co-authored-by: Jay Harris <[email protected]> * Update components/ai_chat/resources/page/components/conversations_list/style.module.scss Co-authored-by: Jay Harris <[email protected]> --------- Co-authored-by: Jay Harris <[email protected]>
brave · Dec 1, 2024 · a9cf2a0 · a9cf2a0
1 parent 9db1353
commit a9cf2a0
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 12 deletions.
diff --git a/components/ai_chat/resources/page/components/conversations_list/style.module.scss b/components/ai_chat/resources/page/components/conversations_list/style.module.scss
@@ -28,23 +28,14 @@
 
 .navItem {
   all: unset;
-
+  border-radius: var(--leo-radius-m);
   display: block;
-
   font: var(--leo-font-default-regular);
-  padding: var(--leo-spacing-l) var(--leo-spacing-xl);
-  border-radius: 8px;
-  position: relative;
-  transition: all 0.2s ease-out allow-discrete;
-
-  &:hover {
-    background: var(--leo-color-container-highlight);
-    box-shadow: var(--leo-effect-elevation-01);
-  }
 }
 
 .navItemActive {
   background: var(--leo-color-container-background);
+  border-radius: var(--leo-radius-m);
   transition: all 0.2s ease-out allow-discrete;
 }
 
@@ -65,9 +56,19 @@
 }
 
 .displayTitle {
-  width: 100%;
+  border-radius: var(--leo-radius-m);
+  cursor: pointer;
   display: flex;
   justify-content: space-between;
+  padding: var(--leo-spacing-l) var(--leo-spacing-xl);
+  position: relative;
+  transition: all 0.2s ease-out allow-discrete;
+  width: 100%;
+
+  &:hover {
+    background: var(--leo-color-container-highlight);
+    box-shadow: var(--leo-effect-elevation-01);
+  }
 }
 
 .displayTitleContent {

diff --git a/components/ai_chat/resources/page/components/suggested_question/style.module.scss b/components/ai_chat/resources/page/components/suggested_question/style.module.scss
@@ -20,6 +20,7 @@
 .icon {
   height: 32px;
   width: 32px;
+  font-size: 20px;
   background: var(--leo-color-neutral-10);
   display: flex;
   align-items: center;