Tweaks the chat example

tonysm · Feb 21, 2024 · ac797e2 · ac797e2
1 parent e4664ad
commit ac797e2
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 8 deletions.
diff --git a/workbench/resources/views/chat/partials/composer.blade.php b/workbench/resources/views/chat/partials/composer.blade.php
@@ -1,14 +1,14 @@
 <form action="{{ route('messages.store') }}" method="post" class="group p-4 sm:p-0" data-controller="composer">
     @csrf
 
-    <div class="flex items-end space-x-1 px-1 justify-between rounded-lg sm:rounded-3xl border border-gray-400 bg-white focus-within:border-transparent focus-within:ring-4">
-        <div class="shrink-0 flex items-end my-1">
+    <div class="flex items-end space-x-1 px-1 justify-between rounded-3xl border border-gray-400 bg-white focus-within:border-transparent focus-within:ring-4">
+        <div class="flex group-focus-within:hidden sm:group-focus-within:flex shrink-0 items-end my-1">
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-9 h-9">
                 <path stroke-linecap="round" stroke-linejoin="round" d="M12 20.25c4.97 0 9-3.694 9-8.25s-4.03-8.25-9-8.25S3 7.444 3 12c0 2.104.859 4.023 2.273 5.48.432.447.74 1.04.586 1.641a4.483 4.483 0 0 1-.923 1.785A5.969 5.969 0 0 0 6 21c1.282 0 2.47-.402 3.445-1.087.81.22 1.668.337 2.555.337Z" />
             </svg>
         </div>
 
-        <div class="w-full h-full my-auto overflow-auto">
+        <div class="group-focus-within:ml-3 sm:group-focus-within:ml-1 flex flex-col my-auto flex-1 space-y-1" style="min-inline-size: 0;">
             @include('chat.partials.trix-input')
         </div>
 
@@ -20,7 +20,7 @@
                 <span class="sr-only">{{ __('Send') }}</span>
             </button>
 
-            <button type="button" data-action="composer#toggleToolbar" class="rounded-full text-black p-2 focus:ring-2 focus:ring-inset focus:ring-yello-500">
+            <button type="button" data-action="composer#toggleToolbar" class="hidden sm:block rounded-full text-black p-2 focus:ring-2 focus:ring-inset focus:ring-yello-500">
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" stroke="currentColor" class="w-5 h-5">
                     <path d="M3 19V1h8a5 5 0 0 1 3.88 8.16A5.5 5.5 0 0 1 11.5 19H3zm7.5-8H7v5h3.5a2.5 2.5 0 1 0 0-5zM7 4v4h3a2 2 0 1 0 0-4H7z"/>
                 </svg>

diff --git a/workbench/resources/views/chat/partials/trix-input.blade.php b/workbench/resources/views/chat/partials/trix-input.blade.php
@@ -1,7 +1,6 @@
 <input type="hidden" id="create_message_input" name="content" value="{{ old('content', '') }}" />
 
 <trix-editor
-    autofocus
     placeholder="Say something nice..."
     data-composer-target="text"
     data-controller="rich-text-mentions"
@@ -10,11 +9,11 @@
     name="content"
     toolbar="create_message_toolbar"
     input="create_message_input"
-    class="trix-content rounded-0 p-0 [&_pre]:text-sm min-h-0 max-h-[12vh] overflow-auto border-0 group-data-[composer-show-toolbar-value=true]:py-2 group-data-[composer-show-toolbar-value=true]:min-h-[4em]"
+    class="trix-content overflow-auto rounded-0 p-0 [&_pre]:text-sm min-h-0 max-h-[12vh] border-0 sm:group-data-[composer-show-toolbar-value=true]:py-2 sm:group-data-[composer-show-toolbar-value=true]:min-h-[4em]"
 ></trix-editor>
 
-<trix-toolbar js-cloak id="create_message_toolbar" class="[&_.trix-button-group]:!mb-0 group-data-[composer-show-toolbar-value=true]:mt-2">
-    <div class="trix-button-row !hidden group-data-[composer-show-toolbar-value=true]:!inline-block">
+<trix-toolbar js-cloak id="create_message_toolbar" class="[&_.trix-button-group]:!mb-0 sm:group-data-[composer-show-toolbar-value=true]:mt-2">
+    <div class="trix-button-row !hidden sm:group-data-[composer-show-toolbar-value=true]:!inline-block">
         <span class="trix-button-group trix-button-group--text-tools" data-trix-button-group="text-tools">
             <button type="button" class="trix-button trix-button--icon trix-button--icon-bold" data-trix-attribute="bold" data-trix-key="b" title="Bold" tabindex="-1">Bold</button>
             <button type="button" class="trix-button trix-button--icon trix-button--icon-italic" data-trix-attribute="italic" data-trix-key="i" title="Italic" tabindex="-1">Italic</button>