Refactor sticky mode layout and update extension description and version

Author: robertpiosik

packages/ui/src/components/editor/panel/Tasks/Tasks.module.scss

@@ -44,15 +44,14 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-cursor: grab;
+    cursor: grab;
     margin-bottom: 2px;
   }
 
   &__header-left {
     display: flex;
     align-items: center;
     padding-top: 3px;
-    
   }
 
   &__time {

packages/vscode/package.json

@@ -1,8 +1,8 @@
 {
   "name": "gemini-coder",
   "displayName": "Code Web Chat",
-  "description": "CWC, the autofill for chatbots",
-  "version": "1.713.0",
+  "description": "CWC—coding prompts for chatbots",
+  "version": "1.714.0",
   "scripts": {
     "build": "npx vsce package --no-dependencies",
     "vscode:prepublish": "rimraf out && npm run compile",

packages/vscode/src/views/panel/frontend/Home/Home.module.scss

@@ -70,6 +70,10 @@
   gap: 24px;
   height: 100%;
   padding-top: 4px;
+
+  &--sticky {
+    margin-top: 44px;
+  }
 }
 
 .inner {
@@ -81,25 +85,15 @@
     margin: 0;
   }
 
-  &__mode-wrapper {
-    margin: 0 12px;
-    z-index: 1;
-
-    &--sticky {
-      position: sticky;
-      top: 10px;
-      animation: stickyFadeIn var(--transition-duration-150)
-        var(--transition-timing-function);
-    }
-  }
-
   &__mode {
     position: relative;
     display: flex;
     background-color: var(--vscode-sideBar-background);
     border-radius: 10px;
     border: 1px solid var(--cwc-border-color);
     overflow: hidden;
+    margin: 0 12px;
+    z-index: 1;
 
     > button {
       flex: 1;
@@ -119,6 +113,10 @@
 
     &--sticky {
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+      position: sticky;
+      top: 10px;
+      animation: stickyFadeIn var(--transition-duration-150)
+        var(--transition-timing-function);
 
       &::after {
         height: 20px;

packages/vscode/src/views/panel/frontend/Home/Home.tsx

@@ -107,12 +107,18 @@ export const Home: React.FC<Props> = (props) => {
             full_mode_height_ref.current = current_mode_height
           }
 
-          const height_to_use = is_mode_sticky ? full_mode_height_ref.current : current_mode_height
+          const height_to_use = is_mode_sticky
+            ? full_mode_height_ref.current
+            : current_mode_height
 
           set_is_mode_sticky(top > responses_height + height_to_use + 4)
         }}
       >
-        <div className={styles.content}>
+        <div
+          className={cn(styles.content, {
+            [styles['content--sticky']]: is_mode_sticky
+          })}
+        >
           <div className={styles.inner}>
             {props.response_history.length > 0 && (
               <div className={styles.inner__responses} ref={responses_ref}>
@@ -135,22 +141,23 @@ export const Home: React.FC<Props> = (props) => {
             )}
 
             <div
-              className={cn(styles['inner__mode-wrapper'], {
-                [styles['inner__mode-wrapper--sticky']]: is_mode_sticky
+              className={cn(styles.inner__mode, {
+                [styles['inner__mode--sticky']]: is_mode_sticky
               })}
-              style={{
-                minHeight: is_mode_sticky ? full_mode_height_ref.current : undefined
-              }}
+              ref={mode_ref}
             >
-              <div
-                className={cn(styles.inner__mode, {
-                  [styles['inner__mode--sticky']]: is_mode_sticky
-                })}
-                ref={mode_ref}
-              >
-                <ModeButton pre="Autofill" label="Chatbots" on_click={props.on_chatbots_click} is_compact={is_mode_sticky} />
-                <ModeButton pre="Make" label="API calls" on_click={props.on_api_calls_click} is_compact={is_mode_sticky} />
-              </div>
+              <ModeButton
+                pre="Autofill"
+                label="Chatbots"
+                on_click={props.on_chatbots_click}
+                is_compact={is_mode_sticky}
+              />
+              <ModeButton
+                pre="Make"
+                label="API calls"
+                on_click={props.on_api_calls_click}
+                is_compact={is_mode_sticky}
+              />
             </div>
 
             <Separator height={8} />