Improve prompt view layouts with flex containers and refine configuration component styling

- configurations should occupy all the remaining vertical space and apply space-between on the list items and the Add New button
- a long text doesn't look good
- add translations to [Fragment]
- move '.empty' outside '.configurations'

Author: robertpiosik

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

@@ -72,17 +72,18 @@
 .content {
   display: flex;
   flex-direction: column;
-  align-items: center;
   justify-content: space-between;
   gap: 20px;
   height: 100%;
-  padding-top: 4px;
+
+  > * {
+    flex-shrink: 0;
+  }
 }
 
 .inner {
   display: flex;
   flex-direction: column;
-  width: 100%;
 
   &__target {
     display: flex;

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

@@ -194,6 +194,8 @@ export const Home: React.FC<Props> = (props) => {
       <UiScrollable on_scroll={handle_scroll} top_shadow>
         <div className={styles.content}>
           <div className={styles.inner}>
+            <UiSeparator height={4} />
+
             <div className={styles.inner__target} ref={target_ref}>
               <UiKeycapWrapper
                 char={is_alt_pressed ? 'W' : undefined}

apps/editor/src/views/prompt/frontend/Main/MainView/MainView.module.scss

@@ -8,3 +8,13 @@
     margin: 0 10px;
   }
 }
+
+.content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  > * {
+    flex-shrink: 0;
+  }
+}