Refactor configurations component layout with a list container and conditional hidden footer

- pinned and nonpinned should be held together in a container
- in landscape, in configurations, 'no X configured yet' should be in the middle
- for perfect spacing in the middle the text 'no x created yet', should add invisible 'add new' button on top

├── apps
│   └── editor
│       └── src
│           └── views
│               └── prompt
│                   └── frontend
│                       └── Main
│                           └── MainView
│                               ├── MainView.module.scss
│                               ├── MainView.tsx
│                               └── components
│                                   ├── BrowserConnectionStatus
│                                   │   ├── BrowserConnectionStatus.tsx
│                                   │   └── index.ts
│                                   ├── Header
│                                   │   ├── Header.module.scss
│                                   │   ├── Header.tsx
│                                   │   └── index.ts
│                                   └── PromptAttachments
│                                       ├── PromptAttachments.tsx
│                                       └── index.ts
└── packages
    └── ui
        └── src
            └── components
                └── editor
                    └── prompt
                        └── Configurations
                            ├── Configurations.module.scss
                            └── Configurations.tsx

Author: robertpiosik

packages/ui/src/components/editor/prompt/Configurations/Configurations.module.scss

@@ -106,6 +106,12 @@
   }
 }
 
+.list {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
 .separator {
   height: 1px;
   background-color: var(--vscode-menu-separatorBackground);
@@ -123,7 +129,7 @@
   font-style: italic;
   justify-content: center;
   padding: 4px 12px 3px 12px;
-  height: 100%;
+  flex: 1;
   color: var(--cwc-text-color-dimmed);
 
   @include modern-ui {

packages/ui/src/components/editor/prompt/Configurations/Configurations.tsx

@@ -145,7 +145,15 @@ export const Configurations: React.FC<Configurations.Props> = (props) => {
 
   return (
     <div className={styles.container}>
-      <div>
+      {props.configurations.length == 0 && (
+        <div
+          className={styles.footer}
+          style={{ visibility: 'hidden', pointerEvents: 'none' }}
+        >
+          <Button>{props.translations.add_new}</Button>
+        </div>
+      )}
+      <div className={styles.list}>
         {pinned_configurations.length > 0 && (
           <>
             <div className={styles.configurations}>