Improve select (#211)

lib/ruby_ui/select/select_content.rb

@@ -10,7 +10,7 @@ def initialize(**attrs)
     def view_template(&block)
       div(**attrs) do
         div(
-          class: "max-h-96 min-w-max overflow-auto rounded-md border bg-background p-1 text-foreground shadow-md animate-out group-data-[ruby-ui--select-open-value=true]/select:animate-in fade-out-0 group-data-[ruby-ui--select-open-value=true]/select:fade-in-0 zoom-out-95 group-data-[ruby-ui--select-open-value=true]/select:zoom-in-95 slide-in-from-top-2", &block
+          class: "max-h-96 w-full text-wrap overflow-auto rounded-md border bg-background p-1 text-foreground shadow-md animate-out group-data-[ruby-ui--select-open-value=true]/select:animate-in fade-out-0 group-data-[ruby-ui--select-open-value=true]/select:fade-in-0 zoom-out-95 group-data-[ruby-ui--select-open-value=true]/select:zoom-in-95 slide-in-from-top-2", &block
         )
       end
     end

lib/ruby_ui/select/select_controller.js

@@ -1,5 +1,5 @@
 import { Controller } from "@hotwired/stimulus";
-import { computePosition, autoUpdate, offset } from "@floating-ui/dom";
+import { computePosition, autoUpdate, offset, flip } from "@floating-ui/dom";
 
 export default class extends Controller {
   static targets = ["trigger", "content", "input", "value", "item"];
@@ -121,7 +121,7 @@ export default class extends Controller {
   setFloatingElement() {
     this.cleanup = autoUpdate(this.triggerTarget, this.contentTarget, () => {
       computePosition(this.triggerTarget, this.contentTarget, {
-        middleware: [offset(4)],
+        middleware: [offset(4), flip()],
       }).then(({ x, y }) => {
         Object.assign(this.contentTarget.style, {
           left: `${x}px`,

lib/ruby_ui/select/select_value.rb

@@ -20,7 +20,7 @@ def default_attrs
         data: {
           ruby_ui__select_target: "value"
         },
-        class: "pointer-events-none"
+        class: "truncate pointer-events-none"
       }
     end
   end