Remove container divs for `MessageInput` and `CreateConversationForm`.

The styles for the `MessageInput` and `CreateConversationForm` components assumed that a container div would be present, and the components did not render as intended without that div. Therefore: the divs were "part of" the component in most of the ways that matter, not part of the context in which the component is used.

It turns out that those divs aren't necessary or interesting anyways - they were targets for layout, but the same layout can be achieved without them. This change removes the divs entirely.

Merges component-div-nesting into main.

6 files changed, 5 insertions, 12 deletions

diff --git a/ui/lib/components/CreateConversationForm.svelte b/ui/lib/components/CreateConversationForm.svelte
index e390a78..812a5cf 100644
--- a/ui/lib/components/CreateConversationForm.svelte
+++ b/ui/lib/components/CreateConversationForm.svelte
@@ -16,7 +16,7 @@
   }
 </script>
 
-<form {onsubmit}>
+<form class="create-conversation" {onsubmit}>
   <input type="text" placeholder="start a conversation" bind:value={name} {disabled} />
   <button type="submit">&#x2795;</button>
 </form>
diff --git a/ui/lib/components/MessageInput.svelte b/ui/lib/components/MessageInput.svelte
index 77c39be..1a18f63 100644
--- a/ui/lib/components/MessageInput.svelte
+++ b/ui/lib/components/MessageInput.svelte
@@ -45,7 +45,7 @@
   }
 </script>
 
-<form {onsubmit}>
+<form class="create-message" {onsubmit}>
   <textarea bind:value hidden {disabled}></textarea>
   <div
     role="textbox"
diff --git a/ui/routes/(app)/+layout.svelte b/ui/routes/(app)/+layout.svelte
index 658d966..1210b43 100644
--- a/ui/routes/(app)/+layout.svelte
+++ b/ui/routes/(app)/+layout.svelte
@@ -121,9 +121,7 @@
 <div id="interface">
   <nav id="sidebar" data-expanded={pageContext.showMenu}>
     <ConversationList active={conversationId} {conversations} />
-    <div class="create-conversation">
-      <CreateConversationForm {createConversation} />
-    </div>
+    <CreateConversationForm {createConversation} />
   </nav>
   <main>
     {@render children?.()}
diff --git a/ui/routes/(app)/c/[conversation]/+page.svelte b/ui/routes/(app)/c/[conversation]/+page.svelte
index e6cd845..24baa47 100644
--- a/ui/routes/(app)/c/[conversation]/+page.svelte
+++ b/ui/routes/(app)/c/[conversation]/+page.svelte
@@ -116,6 +116,4 @@
     </MessageRun>
   {/each}
 </div>
-<div class="create-message">
-  <MessageInput {sendMessage} />
-</div>
+<MessageInput {sendMessage} />
diff --git a/ui/styles/sidebar.css b/ui/styles/sidebar.css
index aa0d53b..a06c3e3 100644
--- a/ui/styles/sidebar.css
+++ b/ui/styles/sidebar.css
@@ -41,9 +41,6 @@
 /* create conversation form */
 .create-conversation {
   padding-left: 0.5rem;
-}
-
-.create-conversation form {
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
diff --git a/ui/styles/textarea.css b/ui/styles/textarea.css
index d315bcf..ef17a79 100644
--- a/ui/styles/textarea.css
+++ b/ui/styles/textarea.css
@@ -1,5 +1,5 @@
 /* Message input */
-.create-message form {
+.create-message {
   display: flex;
   flex-direction: row;
   justify-content: flex-start;