style for conversation list expanded

my-workspace/projects/sae-lib/alert-box/alert-box.scss

@@ -1,4 +1,18 @@
+@use '../src/styles/variables.scss';
+@use '../src/styles/shadows.scss';
+
+.alert {
+  padding: 1rem 2rem;
+  border: solid 1px black;
+  border-radius: shadows.$spacing-1;
+  margin-top: shadows.$spacing-1;
+  margin-bottom: shadows.$spacing-1;
+}
+
+
 sae-alert-box {
   font-size: 12px;
   padding: 18px;
+  display: inline-block;
+  text-align: left;
 }

my-workspace/projects/sae-lib/buttons/feedback-button/feedback-button.scss

@@ -2,9 +2,7 @@
   background: #ecf3fa;
   color: #083b7d;
   padding: 8px;
-  border-radius: 8px;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
+  border-radius: 8px 8px 0 0;
   transform: rotate(270deg);
   cursor: pointer;
   display: flex;

my-workspace/projects/sae-lib/src/styles/_conversations.scss

@@ -46,6 +46,8 @@
   margin-bottom: 40px;
   margin-top: 10px;
   animation: fadeIn 0.5s ease-in-out;
+  width: 500px;
+  max-width: 100%;
 
 
   &.llm {

my-workspace/projects/sae-lib/src/styles/_debug.scss

@@ -1,4 +1,3 @@
-
 @use '_shadows.scss';
 
 .visible-imbrication {
@@ -23,14 +22,6 @@
 
 
 // inbox styles
-.alert {
-  padding: 1rem 2rem;
-  border: solid 1px black;
-  border-radius: shadows.$spacing-1;
-  margin-top: shadows.$spacing-1;
-  margin-bottom: shadows.$spacing-1;
-}
-
 app-color-display {
   + app-color-display {
     margin-left: 1rem;

my-workspace/projects/sae-lib/src/styles/_layout_demo.scss

@@ -55,13 +55,16 @@
 
     .is-expanded-left & .column-conversation {
       width: variables.$large-column-panel;
+      flex-basis: variables.$large-column-panel;
     }
   }
 
   .new-chat-title {
-    text-align: left;
+    //text-align: left;
     font-size: 20px;
     font-weight: 600;
+    width: 100%;
+    display: block;
   }
 
   .search-button {
@@ -74,13 +77,22 @@
   .new-button {
     background: linear-gradient(70deg, #07397C -37.98%, #1767AD 17.98%, #255B8E 53.85%);
     @extend .nav-button !optional;
+    width: 100%;
+    text-align: center;
+
+    i {
+      width: 20px;
+      margin-right: 10px;
+      float: left;
+    }
 
     .label {
       display: none;
 
       .is-expanded-left & {
         display: block;
-        width: 100% !important;
+        width: 50%;
+        float: left;
       }
     }
   }
@@ -96,11 +108,10 @@
 
     .is-expanded-left & {
       width: variables.$large-column-panel;
-
+      flex-basis: variables.$large-column-panel;
     }
 
     .conversation-container {
-      padding-top: 12px;
       padding-left: 12px;
     }
 
@@ -113,7 +124,10 @@
     }
 
     .conversation-item {
-      padding: 11px 32px;
+      margin-bottom: 16px;
+      margin-top: 16px;
+      padding: 16px 16px 18px 32px;
+
       cursor: pointer;
       border-radius: 8px;
       color: #6D717C;
@@ -122,6 +136,7 @@
         background: #3B87CC1A;
       }
 
+
       &.is-active {
         background: rgba(#3B87CC1A, 10%);
         font-weight: 600;
@@ -134,6 +149,18 @@
         }
       }
 
+
+      .pinned-icon {
+        position: relative;
+        left: -1.5em;
+
+
+        i {
+          color: #FEC553;
+          fill: #FEC553;
+        }
+      }
+
       .active-peak {
         visibility: hidden;
       }
@@ -144,6 +171,7 @@
         font-weight: 600;
         margin-bottom: 4px;
         display: block;
+        margin-top: -1.5em;
       }
 
       .description {
@@ -157,6 +185,13 @@
       .date {
         color: rgba(#5F5F5F99, 60%);
         float: right;
+        text-align: right;
+        font-family: Barlow;
+        font-size: 10px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 8px;
+        margin-top: -1.5em;
       }
 
     }
@@ -164,6 +199,11 @@
   }
 
 
+  .chat-column {
+
+    min-width: 1000px;
+  }
+
   .chatbot-container-box {
     margin-right: 100px;
   }
@@ -208,9 +248,12 @@
 
     .conversation-messages-container {
       min-height: 600px;
-      width: 800px;
+      max-height: 90vh;
       margin: 0 auto;
       padding-top: 10px;
+      padding-left: 10px;
+      overflow: auto;
+      min-width: 915px;
     }
 
     .main-conversation-container {
@@ -302,14 +345,26 @@
     }
   }
 
+
 }
 
 .columns {
   .column {
     padding-top: 0;
+
+    &.panel-more {
+      &.expanded {
+        width: 300px;
+        flex-basis: 300px;
+      }
+    }
   }
 }
 
+.conversation-bottom {
+  padding: 10px;
+}
+
 .bottom-warning-container {
   margin-left: 70px;
   margin-top: 18px;

my-workspace/projects/sae-lib/src/styles/_states.scss

@@ -39,3 +39,8 @@
   color: variables.$danger-color;
   border: 0;
 }
+
+
+.is-clickable {
+  cursor: pointer;
+}