fixed: typo comment and repetetive css declaration

Author: dogusata

docs/DATAMODEL.md

@@ -1973,7 +1973,7 @@ mkdir -p src/ lalalaaaa
 ---
 
 ## `autoCollapse`
-It will allow you to limit the card height up to 25% of the screen height and give and option to expand/collapse it back.
+It will allow you to limit the card height up to 25% of the screen height and give an option to expand/collapse it back.
 
 ```typescript
 mynahUI.addChatItem(tabId, {

src/components/chat-item/chat-item-card.ts

@@ -176,7 +176,6 @@ export class ChatItemCard {
     if (elm != null) {
       if (this.props.chatItem.autoCollapse === true && elm.scrollHeight > window.innerHeight / 4) {
         this.render?.addClass('mynah-chat-item-auto-collapse');
-        // ...(this.props.chatItem.autoCollapse === true ? [ 'mynah-chat-item-auto-collapse' ] : []),
       } else {
         this.render?.removeClass('mynah-chat-item-auto-collapse');
       }

src/styles/components/chat/_chat-item-card.scss

@@ -111,12 +111,14 @@
         }
     }
 
+    --mynah-chat-item-more-content-indicator-bg-color: var(--mynah-card-bg);
+
     &.mynah-chat-item-auto-collapse {
         > .more-content-indicator {
             order: 1000;
             justify-content: center;
-            background-color: var(--mynah-card-bg);
-            box-shadow: 0 -15px 15px 0px var(--mynah-card-bg);
+            background-color: var(--mynah-chat-item-more-content-indicator-bg-color);
+            box-shadow: 0 -10px 10px -5px var(--mynah-chat-item-more-content-indicator-bg-color);
             height: var(--mynah-sizing-9);
             z-index: 1000;
             position: absolute;
@@ -398,8 +400,7 @@
     &.mynah-chat-item-directive {
         color: var(--mynah-color-text-weak);
         &.mynah-chat-item-auto-collapse > .more-content-indicator {
-            background-color: var(--mynah-color-bg);
-            box-shadow: 0 -15px 15px 0px var(--mynah-color-bg);
+            --mynah-chat-item-more-content-indicator-bg-color: var(--mynah-color-bg);
             border-bottom-left-radius: 0;
             border-bottom-right-radius: 0;
         }
@@ -445,17 +446,15 @@
         }
 
         &.mynah-chat-item-auto-collapse > .more-content-indicator {
-            background-color: var(--mynah-card-bg-alternate);
-            box-shadow: 0 -15px 15px 0px var(--mynah-card-bg-alternate);
+            --mynah-chat-item-more-content-indicator-bg-color: var(--mynah-card-bg-alternate);
+            color: var(--mynah-color-text-alternate);
             border-bottom-right-radius: var(--mynah-card-radius-corner);
             border-bottom-left-radius: var(--mynah-card-radius);
-            color: var(--mynah-color-text-alternate);
         }
     }
     &.mynah-chat-item-system-prompt {
         &.mynah-chat-item-auto-collapse > .more-content-indicator {
-            background-color: var(--mynah-color-status-warning);
-            box-shadow: 0 -15px 15px 0px var(--mynah-color-status-warning);
+            --mynah-chat-item-more-content-indicator-bg-color: var(--mynah-color-status-warning);
         }
         > .mynah-card {
             background-color: var(--mynah-color-status-warning);