Refactor workspace dropdown styles in Home component and disable pointer events on prompt slot

Author: robertpiosik

apps/editor/src/views/prompt/frontend/Home/Home.module.scss

@@ -162,36 +162,34 @@
     position: relative;
     display: flex;
     align-items: center;
-    height: 24px;
     min-width: 0;
-    margin-right: 2px;
 
-    &-button {
+    &__button {
       cursor: pointer;
       display: flex;
       align-items: center;
-      gap: 4px;
+      gap: 2px;
       color: var(--vscode-descriptionForeground);
-      font-size: 11px;
       min-width: 0;
-      padding: 2px 4px;
+      padding: 2px 4px 2px 5px;
       border-radius: 5px;
 
       &:hover {
         background-color: var(--vscode-toolbar-hoverBackground);
         color: var(--vscode-icon-foreground);
       }
-    }
 
-    &-text {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
+      &__text {
+        font-size: 12px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
 
-    &-icon {
-      font-size: 12px;
-      flex-shrink: 0;
+      &__icon {
+        font-size: 12px !important;
+        flex-shrink: 0;
+      }
     }
   }
 

apps/editor/src/views/prompt/frontend/Home/Home.tsx

@@ -253,7 +253,7 @@ export const Home: React.FC<Props> = (props) => {
                   {roots.length > 1 && (
                     <div className={styles['inner__workspace-dropdown']}>
                       <div
-                        className={styles['inner__workspace-dropdown-button']}
+                        className={styles['inner__workspace-dropdown__button']}
                         onClick={(e) => {
                           e.stopPropagation()
                           post_message(props.vscode, {
@@ -265,14 +265,16 @@ export const Home: React.FC<Props> = (props) => {
                         title={t('home.folder')}
                       >
                         <span
-                          className={styles['inner__workspace-dropdown-text']}
+                          className={
+                            styles['inner__workspace-dropdown__button__text']
+                          }
                         >
                           {active_root?.split(/[\\/]/).pop() || active_root}
                         </span>
                         <span
                           className={cn(
                             'codicon codicon-unfold',
-                            styles['inner__workspace-dropdown-icon']
+                            styles['inner__workspace-dropdown__button__icon']
                           )}
                         />
                       </div>

apps/editor/src/views/prompt/frontend/Prompt.module.scss

@@ -7,6 +7,7 @@
   z-index: 1;
   height: 100vh;
   width: 100%;
+  pointer-events: none;
 }
 
 .content {