avo 3.17.0 → 3.17.1.tw4

data/app/components/avo/profile_item_component.rb

@@ -23,6 +23,6 @@ class Avo::ProfileItemComponent < Avo::BaseComponent
   private
 
   def button_classes
-    "flex-1 flex items-center justify-center bg-white text-left cursor-pointer text-gray-800 font-semibold hover:bg-primary-100 block px-4 py-1 w-full py-3 text-center rounded w-full"
+    "flex-1 flex items-center justify-center bg-white text-left cursor-pointer text-gray-800 font-semibold hover:bg-primary-100 block px-4 py-1 w-full py-3 text-center rounded-sm w-full"
   end
 end

data/app/components/avo/resource_sidebar_component.html.erb

@@ -1,4 +1,4 @@
-<div class="resource-sidebar-component divide-y"
+<div class="resource-sidebar-component divide-y divide-gray-200"
   data-component-name="<%= self.class.to_s.underscore %>"
   data-component-index="<%= @index %>"
   data-resource-name="<%= @resource.class.to_s %>"

data/app/components/avo/row_selector_component.html.erb

@@ -5,7 +5,7 @@
     name: t("avo.select_item"),
     title: t("avo.select_item"),
     autocomplete: :off,
-    class: class_names("mx-3 rounded checked:bg-primary-400 focus:checked:!bg-primary-400", {
+    class: class_names("mx-3 rounded-sm checked:bg-primary-400 focus:checked:!bg-primary-400", {
       "absolute inset-auto left-0 mt-3 z-10 hidden group-hover:block checked:block": @floating,
       "w-5 h-5": @size.to_sym == :lg,
       "w-4 h-4": @size.to_sym != :lg,

data/app/components/avo/sidebar/link_component.rb

@@ -26,6 +26,6 @@ class Avo::Sidebar::LinkComponent < Avo::BaseComponent
   end
 
   def classes
-    "px-4 pr-0 flex-1 flex mx-6 leading-none py-2 text-black rounded font-medium hover:bg-gray-100 gap-1"
+    "px-4 pr-0 flex-1 flex mx-6 leading-none py-2 text-black rounded-sm font-medium hover:bg-gray-100 gap-1"
   end
 end

data/app/components/avo/sidebar_component.html.erb

@@ -1,6 +1,6 @@
 <%= content_tag :div,
   class: class_names(
-    "avo-sidebar fixed z-[60] t-0 application-sidebar w-64 flex-1 border-r lg:border-none bg-none xh-dvh h-[calc(100dvh-4rem)] bg-application lg:bg-transparent",
+    "avo-sidebar fixed z-[60] t-0 application-sidebar w-64 flex-1 border-r border-gray-200 lg:border-none bg-none xh-dvh h-[calc(100dvh-4rem)] bg-application lg:bg-transparent",
     "print:hidden": Avo.configuration.hide_layout_when_printing,
     "hidden": !@sidebar_open,
   ),
@@ -61,8 +61,8 @@
       </div>
     </div>
     <% if Rails.env.development? %>
-      <div class="p-4 border-t group">
-        <%= link_to helpers.avo.avo_private_status_path, class: "block px-4 py-2 border rounded flex justify-between items-center w-full text-black text-sm" do %>
+      <div class="p-4 border-t border-gray-200 group">
+        <%= link_to helpers.avo.avo_private_status_path, class: "block px-4 py-2 border border-gray-200 rounded-sm flex justify-between items-center w-full text-black text-sm" do %>
           <span>Avo Status</span> <span><div class="rounded-full w-4 h-4 <%= Avo.app_status ? "bg-green-400" : "bg-orange-400" %>"></div></span>
         <% end %>
         <div class="absolute text-xs text-gray-700 group-hover:block hidden text-center w-full -ml-4">👆Visible only in development👆</div>

data/app/components/avo/sidebar_profile_component.html.erb

@@ -1,7 +1,7 @@
-<div class="text-black border-gray-150 p-4 flex border-t">
+<div class="text-black border-gray-150 p-4 flex border-t border-gray-200">
   <div class="flex-1 flex space-x-4 w-full">
     <% if avatar.present? %>
-      <div class="relative aspect-square w-10 h-10 overflow-hidden rounded shrink-0">
+      <div class="relative aspect-square w-10 h-10 overflow-hidden rounded-sm shrink-0">
         <%= image_tag helpers.main_app.url_for(avatar), class: "object-cover min-w-full min-h-full h-full" %>
       </div>
     <% end %>
@@ -21,7 +21,7 @@
       <%= helpers.svg "avo/three-dots", class: 'h-4' %>
     </a>
     <div
-      class="hidden absolute flex flex-col inset-auto right-0 bottom-0 mb-8 bg-white rounded min-w-[200px] shadow-context z-40"
+      class="hidden absolute flex flex-col inset-auto right-0 bottom-0 mb-8 bg-white rounded-sm min-w-[200px] shadow-context z-40"
       data-toggle-target="panel"
       data-transition-enter="transition ease-in-out duration-100"
       data-transition-enter-start="transform opacity-0 translate-y-3"
@@ -49,7 +49,7 @@
             action: "submit->sign-out#handle",
           },
           class: 'flex-1' do |form| %>
-          <%= form.button turbo_confirm: t('avo.are_you_sure'), class: "flex-1 flex items-center justify-center bg-white text-left cursor-pointer text-red-600 font-semibold hover:bg-red-100 block px-4 py-1 w-full py-3 text-center rounded w-full" do %>
+          <%= form.button turbo_confirm: t('avo.are_you_sure'), class: "flex-1 flex items-center justify-center bg-white text-left cursor-pointer text-red-600 font-semibold hover:bg-red-100 block px-4 py-1 w-full py-3 text-center rounded-sm w-full" do %>
           <%= helpers.svg "avo/logout", class: 'h-4 mr-1' %> <%= t('avo.sign_out') %>
           <% end %>
         <% end %>

data/app/components/avo/tab_group_component.html.erb

@@ -11,7 +11,7 @@
   <% visible_tabs.each_with_index do |tab, index| %>
     <%= content_tag :div, **args(tab) do %>
       <%= render Avo::PanelHeaderComponent.new name: group.title, description: group.description %>
-      <div class="border rounded-lg p-2 -mx-2 -my-2 lg:p-4 lg:-mx-4 lg:-my-3 space-y-4">
+      <div class="border border-gray-200 rounded-lg p-2 -mx-2 -my-2 lg:p-4 lg:-mx-4 lg:-my-3 space-y-4">
         <%= render Avo::TabSwitcherComponent.new resource: resource, current_tab: visible_tabs.first, group: group, active_tab_name: tab.name, view: view %>
         <% if !tab.is_empty? %>
           <% if tab.lazy_load && view.display? %>

data/app/helpers/avo/application_helper.rb

@@ -28,7 +28,7 @@ module Avo
     end
 
     def button_classes(extra_classes = nil, color: nil, variant: nil, size: :md, active: false)
-      classes = "inline-flex flex-grow-0 items-center text-sm font-semibold leading-6 fill-current whitespace-nowrap transition duration-100 rounded transform transition duration-100 active:translate-x-px active:translate-y-px cursor-pointer disabled:cursor-not-allowed #{extra_classes}"
+      classes = "inline-flex grow-0 items-center text-sm font-semibold leading-6 fill-current whitespace-nowrap transition duration-100 rounded-sm transform transition duration-100 active:translate-x-px active:translate-y-px cursor-pointer disabled:cursor-not-allowed #{extra_classes}"
 
       if color.present?
         if variant.present? && (variant.to_sym == :outlined)
@@ -71,7 +71,7 @@ module Avo
     end
 
     def input_classes(extra_classes = "", has_error: false)
-      classes = "appearance-none inline-flex bg-gray-25 disabled:cursor-not-allowed text-gray-600 disabled:opacity-50 rounded py-2 px-3 leading-tight border focus:border-gray-600 focus-visible:ring-0 focus:text-gray-700 placeholder:text-gray-300"
+      classes = "appearance-none inline-flex bg-gray-25 disabled:cursor-not-allowed text-gray-600 disabled:opacity-50 rounded-sm py-2 px-3 leading-tight border focus:border-gray-600 focus-visible:ring-0 focus:text-gray-700 placeholder:text-gray-300"
 
       classes += if has_error
         " border-red-600"
@@ -85,11 +85,11 @@ module Avo
     end
 
     def white_panel_classes
-      "bg-white rounded shadow-md"
+      "bg-white rounded-sm shadow-md"
     end
 
     def card_classes
-      "bg-white rounded shadow-panel"
+      "bg-white rounded-sm shadow-panel"
     end
 
     def get_model_class(model)

data/app/javascript/js/controllers/fields/key_value_controller.js

@@ -145,7 +145,7 @@ export default class extends Controller {
     const inputValue = id === 'key' ? key : value
 
     return `<input
-  class="${this.options.inputClasses} focus:bg-gray-100 !rounded-none border-gray-600 border-r border-l-0 border-b-0 border-t-0 focus:border-gray-300 w-1/2 focus:outline-none outline-none key-value-input-${id}"
+  class="${this.options.inputClasses} focus:bg-gray-100 !rounded-none border-gray-600 border-r border-l-0 border-b-0 border-t-0 focus:border-gray-300 w-1/2 focus:outline-hidden outline-hidden key-value-input-${id}"
   data-action="input->key-value#${id}FieldUpdated"
   placeholder="${this.options[`${id}_label`]}"
   data-index="${index}"

data/app/javascript/js/controllers/fields/tags_field_helpers.js

@@ -36,7 +36,7 @@ export function suggestionItemTemplate(tagData) {
   ${
   tagData.avatar
     ? `
-  <div class='rounded w-8 h-8 block mr-2'>
+  <div class='rounded-sm w-8 h-8 block mr-2'>
       <img onerror="this.style.visibility='hidden'" class="w-full" src="${tagData.avatar}">
   </div>`
     : ''

data/app/javascript/js/controllers/search_controller.js

@@ -152,7 +152,7 @@ export default class extends Controller {
                 classes = 'rounded-full'
                 break
               case 'rounded':
-                classes = 'rounded'
+                classes = 'rounded-sm'
                 break
               case 'square':
                 classes = 'rounded-none'
@@ -163,7 +163,7 @@ export default class extends Controller {
               createElement('img', {
                 src: item._avatar,
                 alt: item._label,
-                class: `flex-shrink-0 w-8 h-8 my-[2px] inline mr-2 ${classes}`,
+                class: `shrink-0 w-8 h-8 my-[2px] inline mr-2 ${classes}`,
               }),
             )
           }

data/app/views/avo/base/preview.html.erb

@@ -5,7 +5,7 @@
     <% end %>
 
     <% if @preview_fields.present? %>
-      <div class="mt-0 divide-y border-t">
+      <div class="mt-0 divide-y divide-gray-200 border-t border-gray-200">
         <% @preview_fields.each_with_index do |field, index| %>
           <%= render field
             .hydrate(

data/app/views/avo/debug/report.html.erb

@@ -12,7 +12,7 @@
           <div class="sm:col-span-6 mt-4">
             <label for="about" class="block text-sm font-medium text-gray-700">Details</label>
             <div class="mt-1">
-              <%= f.text_area :body, rows: 3, class: "block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm disabled:bg-gray-100", disabled: !Avo::Current.license.pro? %>
+              <%= f.text_area :body, rows: 3, class: "block w-full rounded-md border-gray-300 shadow-xs focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm disabled:bg-gray-100", disabled: !Avo::Current.license.pro? %>
             </div>
           </div>
           <%= f.hidden_field :license_key, value: Avo::Services::DebugService.debug_report(request)[:license_response]["license_key"] %>

data/app/views/avo/debug/status.html.erb

@@ -19,7 +19,7 @@
     <% end %>
     <% c.with_bare_content do %>
       <div class="grid gap-4 grid-cols-2">
-        <div class="relative flex flex-col bg-white rounded shadow-panel p-4 space-y-4 h-full">
+        <div class="relative flex flex-col bg-white rounded-sm shadow-panel p-4 space-y-4 h-full">
           <div class="flex justify-between w-full">
             <div class="font-semibold">License info</div>
             <div class="flex justify-self-end">
@@ -52,26 +52,31 @@
                 </dl>
               <% end %>
               <div class="mt-4">
-                <dl>
+                <dl class="flex flex-col">
                   <% information_items.each do |item| %>
-                    <dt class="font-semibold text-sm"><%= item.humanize %></dt>
-                    <dd><%= license.response[item] %></dd>
-                  <% end %>
-                  <dt class="font-semibold text-sm">Last fetched at</dt>
-                  <dd><%= license.response['fetched_at'] %> <br>
-                    <% if license.response['fetched_at'].present? %>
-                      (<%= time_ago_in_words license.response['fetched_at'] %> ago)</dd>
+                    <div>
+                      <dt class="font-semibold text-sm"><%= item.humanize %></dt>
+                      <dd><%= license.response[item] %></dd>
+                    </div>
                   <% end %>
-                  <dt class="font-semibold text-sm">Cache store</dt>
-                  <dd>
-                    <%= Avo.cache_store.class %>
-                  </dd>
+                    <dt class="font-semibold text-sm">Last fetched at</dt>
+                    <dd><%= license.response['fetched_at'] %> <br>
+                      <% if license.response['fetched_at'].present? %>
+                        (<%= time_ago_in_words license.response['fetched_at'] %> ago)
+                      <% end %>
+                    </dd>
+                  <div>
+                    <dt class="font-semibold text-sm">Cache store</dt>
+                    <dd>
+                      <%= Avo.cache_store.class %>
+                    </dd>
+                  </div>
                 </dl>
               </div>
             </div>
           </div>
         </div>
-        <div class="relative flex flex-col bg-white rounded shadow-panel p-4 space-y-4 h-full">
+        <div class="relative flex flex-col bg-white rounded-sm shadow-panel p-4 space-y-4 h-full">
           <div class="flex justify-between w-full">
             <div class="font-semibold">Plugins</div>
           </div>

data/app/views/avo/home/_actions.html.erb

@@ -7,7 +7,7 @@
     <div class="mt-2">
       <code class="text-lg">Toggle published</code>
       <div class="mt-1">
-        <code class="p-1 rounded bg-sky-500 text-white">bin/rails generate avo:action toggle_published</code>
+        <code class="p-1 rounded-sm bg-sky-500 text-white">bin/rails generate avo:action toggle_published</code>
       </div>
     </div>
 

data/app/views/avo/home/_dashboards.html.erb

@@ -8,7 +8,7 @@
 
   <div class="mt-2">
     <div class="mt-1">
-      <code class="p-1 rounded bg-sky-500 text-white">bin/rails generate avo:dashboard dashy</code>
+      <code class="p-1 rounded-sm bg-sky-500 text-white">bin/rails generate avo:dashboard dashy</code>
     </div>
   </div>
 

data/app/views/avo/home/_filters.html.erb

@@ -7,7 +7,7 @@
     <div class="mt-2">
       <code class="text-lg">Published filter</code>
       <div class="mt-1">
-        <code class="p-1 rounded bg-sky-500 text-white">bin/rails generate avo:filter published_filter</code>
+        <code class="p-1 rounded-sm bg-sky-500 text-white">bin/rails generate avo:filter published_filter</code>
       </div>
     </div>
 

data/app/views/avo/home/_resources.html.erb

@@ -20,7 +20,7 @@
         <% models.each do |model| %>
           <code class="text-lg"><%= model.to_s %></code>
           <div>
-            <code class="p-1 rounded bg-sky-500 text-white">bin/rails generate avo:resource <%= model.to_s %></code>
+            <code class="p-1 rounded-sm bg-sky-500 text-white">bin/rails generate avo:resource <%= model.to_s %></code>
           </div>
         <% end %>
       </div>
@@ -30,7 +30,7 @@
       You may generate a resource using the following command:
       <br>
 
-      <code class="p-1 rounded bg-sky-500 text-white">bin/rails generate avo:resource post</code>
+      <code class="p-1 rounded-sm bg-sky-500 text-white">bin/rails generate avo:resource post</code>
     </div>
   <% end %>
 

data/app/views/avo/home/failed_to_load.html.erb

@@ -8,7 +8,7 @@
     <div class="relative block text-gray-300 h-64 w-full">
       <%= svg "avo/failed_to_load", class: "#{classes} h-52 text-gray-400" %>
     </div>
-    <div class="relative block text-center text-lg text-gray-400 font-semibold pb-6"><%= label %> <span class="border-b-2 border-dashed"><%= params[:turbo_frame].to_s.humanize.downcase if params[:turbo_frame].present? %></span> frame</div>
+    <div class="relative block text-center text-lg text-gray-400 font-semibold pb-6"><%= label %> <span class="border-b-2 border-gray-200 border-dashed"><%= params[:turbo_frame].to_s.humanize.downcase if params[:turbo_frame].present? %></span> frame</div>
     <% if Rails.env.development? && src_url %>
       <div class="text-center text-sm w-full pb-3">
         This is not an issue with Avo. Use <%= link_to 'this page', src_url, target: :_blank %> to see why this frame failed to load.

data/app/views/avo/partials/_confirm_dialog.html.erb

@@ -1,7 +1,7 @@
-<dialog id="turbo-confirm" class="w-72">
+<dialog id="turbo-confirm" class="mx-auto my-auto w-72">
   <form method="dialog">
     <div class="relative w-full max-w-xl max-h-full">
-      <div class="relative bg-white rounded-lg shadow">
+      <div class="relative bg-white rounded-lg shadow-sm">
         <button value="cancel" class="absolute top-3 end-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center" data-modal-hide="popup-modal" tabindex="3">
           <%= svg "x-mark", class: "size-6" %>
           <span class="sr-only"><%= t "avo.close_modal" %></span>
@@ -14,10 +14,10 @@
             <%= t "avo.are_you_sure" %>
           </p>
           <div class="mt-12 w-full flex flex-col justify-center gap-2">
-            <button value="confirm" class="text-red-600 border border-red-600 hover:bg-red-50 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm items-center px-4 py-2 text-center" tabindex="1" autofocus>
+            <button value="confirm" class="text-red-600 border border-red-600 hover:bg-red-50 focus:ring-4 focus:outline-hidden focus:ring-red-300 font-medium rounded-lg text-sm items-center px-4 py-2 text-center cursor-pointer" tabindex="1" autofocus>
               <%= t "avo.yes_confirm" %>
             </button>
-            <button value="cancel" class="px-4 py-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100" tabindex="2">
+            <button value="cancel" class="px-4 py-2 text-sm font-medium text-gray-900 focus:outline-hidden bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 cursor-pointer" tabindex="2">
               <%= t "avo.no_cancel" %>
             </button>
           </div>

data/app/views/avo/partials/_custom_tools_alert.html.erb

@@ -1,7 +1,7 @@
 <% if @custom_tools_alert_visible %>
   <div class="w-full inset-auto bottom-0 z-50 mb-4 opacity-75 hover:opacity-100 transition-opacity duration-150">
-    <a href="https://avohq.io/pricing" target="_blank" class="rounded bg-orange-700 text-white py-2 px-4 text-sm block items-center flex leading-tight">
-      <%= svg "avo/exclamation", class: "h-6 inline mr-2 text-bold flex-shrink-0 mr-1" %> Warning. <%= @custom_tools_alert_visible %> This page will not be visible in a production environment.
+    <a href="https://avohq.io/pricing" target="_blank" class="rounded-sm bg-orange-700 text-white py-2 px-4 text-sm block items-center flex leading-tight">
+      <%= svg "avo/exclamation", class: "h-6 inline mr-2 text-bold shrink-0 mr-1" %> Warning. <%= @custom_tools_alert_visible %> This page will not be visible in a production environment.
     </a>
   </div>
 <% end %>
@@ -12,8 +12,8 @@
         url, message, target = error.values_at :url, :message, :target
       %>
       <div class="w-full inset-auto bottom-0 z-50 mb-4 opacity-75 hover:opacity-100 transition-opacity duration-150">
-        <a href="<%= url %>" target="<%= target %>" class="rounded bg-orange-700 text-white py-2 px-4 text-sm items-center flex leading-tight space-x-2">
-          <%= svg "avo/exclamation", class: "h-6 inline mr-2 text-bold flex-shrink-0 mr-1" %>
+        <a href="<%= url %>" target="<%= target %>" class="rounded-sm bg-orange-700 text-white py-2 px-4 text-sm items-center flex leading-tight space-x-2">
+          <%= svg "avo/exclamation", class: "h-6 inline mr-2 text-bold shrink-0 mr-1" %>
           <div>
             <%= simple_format message %>
           </div>
@@ -21,8 +21,8 @@
       </div>
     <% elsif error.is_a? String %>
       <div class="w-full inset-auto bottom-0 z-50 mb-4 opacity-75 hover:opacity-100 transition-opacity duration-150">
-        <div class="rounded bg-orange-700 text-white py-2 px-4 text-sm items-center flex leading-tight space-x-2">
-          <%= svg "avo/exclamation", class: "h-6 inline mr-2 text-bold flex-shrink-0 mr-1" %>
+        <div class="rounded-sm bg-orange-700 text-white py-2 px-4 text-sm items-center flex leading-tight space-x-2">
+          <%= svg "avo/exclamation", class: "h-6 inline mr-2 text-bold shrink-0 mr-1" %>
           <div><%= simple_format error %></div>
         </div>
       </div>

data/app/views/avo/partials/_navbar.html.erb

@@ -1,8 +1,8 @@
-<%= content_tag :div, class: class_names("fixed bg-white p-2 w-full flex flex-shrink-0 items-center z-[100] px-4 lg:px-4 border-b space-x-4 lg:space-x-0 h-16", {"print:hidden": Avo.configuration.hide_layout_when_printing}) do %>
-  <div class="flex items-center space-x-2 w-auto lg:w-64 flex-shrink-0 h-full">
+<%= content_tag :div, class: class_names("fixed bg-white p-2 w-full flex shrink-0 items-center z-[100] px-4 lg:px-4 border-b border-gray-200 space-x-4 lg:space-x-0 h-16", {"print:hidden": Avo.configuration.hide_layout_when_printing}) do %>
+  <div class="flex items-center space-x-2 w-auto lg:w-64 shrink-0 h-full">
     <div>
       <%= a_button class: 'lg:hidden', icon: 'avo/menu', size: :xs, compact: true, style: :text, data: { action: 'click->sidebar#toggleSidebarOnMobile' }, aria: {label: "Toggle sidebar"} %>
-      <%= a_button class: 'hidden lg:block', icon: 'avo/menu', size: :xs, compact: true, style: :text, data: { action: 'click->sidebar#toggleSidebar' }, aria: {label: "Toggle sidebar"} %>
+      <%= a_button class: '!hidden lg:!inline-flex', icon: 'avo/menu', size: :xs, compact: true, style: :text, data: { action: 'click->sidebar#toggleSidebar' }, aria: {label: "Toggle sidebar"} %>
     </div>
     <%= render partial: "avo/partials/logo" %>
   </div>

data/app/views/avo/partials/_resource_search.html.erb

@@ -12,5 +12,5 @@
     <% end %>
   >
   </div>
-  <div class="hidden relative inline-flex text-gray-400 text-sm border border-gray-300 rounded cursor-pointer" data-search-target="button"></div>
+  <div class="hidden relative inline-flex text-gray-400 text-sm border border-gray-300 rounded-sm cursor-pointer" data-search-target="button"></div>
 </div>

data/app/views/avo/partials/_table_header.html.erb

@@ -10,7 +10,7 @@
           name: t("avo.select_all"),
           title: t("avo.select_all"),
           autocomplete: :off,
-          class: "mx-3 rounded w-4 h-4 checked:bg-primary-400 focus:checked:!bg-primary-400",
+          class: "mx-3 rounded-sm w-4 h-4 checked:bg-primary-400 focus:checked:!bg-primary-400",
           data: {
             action: "input->item-select-all#toggle",
             item_select_all_target: "checkbox",
@@ -97,7 +97,7 @@
                 association_name: @field&.for_attribute || @field&.id
               }.compact
             ) %>"
-            class="absolute inset-auto bg-white w-full sm:w-[400px] top-0 mt-6 p-4 z-40 shadow-modal rounded overflow-hidden hidden border border-gray-50"
+            class="absolute inset-auto bg-white w-full sm:w-[400px] top-0 mt-6 p-4 z-40 shadow-modal rounded-sm overflow-hidden hidden border border-gray-50"
             data-toggle-target="panel"
           >
             <%= render Avo::LoadingComponent.new %>

data/app/views/avo/sidebar/_license_warning.html.erb

@@ -1,5 +1,5 @@
 <div class="w-10/12 ml-1/12 inset-auto bottom-0 z-50 my-4 opacity-50 hover:opacity-100 transition-opacity duration-150 group">
-  <a href="https://avohq.io/pricing" target="_blank" class="rounded bg-green-700 text-white py-2 px-4 text-sm block group-hover:pt-4">
+  <a href="https://avohq.io/pricing" target="_blank" class="rounded-sm bg-green-700 text-white py-2 px-4 text-sm block group-hover:pt-4">
     <%= svg "avo/exclamation", class: 'h-6 inline mr-1 text-bold' %> <%= title %>
     <div class="group-hover:block hidden py-2">
       <%= message %> <%= svg "avo/arrow-circle-right", class: "h-6 inline float-right" %>

data/lib/avo/concerns/row_controls_configuration.rb

@@ -26,21 +26,22 @@ module Avo
       end
 
       def row_controls_classes
-        classes = "text-right whitespace-nowrap px-3"
-
-        if render_row_controls_on_the_left?
-          classes += " w-px"
-        end
-
-        if row_controls_configurations[:show_on_hover]
-          classes += " opacity-0 group-hover:opacity-100"
-        end
-
-        if row_controls_configurations[:float]
-          classes += " floating-row-controls sticky group-hover:bg-gray-50 bg-white inset-auto right-0"
-        end
-
-        classes
+        float_classes = "bg-white
+          group-hover:bg-gray-50
+          sticky inset-auto right-0
+
+          before:content-[''] before:absolute before:z-10 before:inset-auto before:left-0 before:top-0 before:mt-0 before:-translate-x-full before:w-3 before:h-full
+          before:bg-gradient-to-r
+          before:from-transparent before:to-white
+          group-hover:before:from-transparent group-hover:before:to-gray-50
+        "
+
+        class_names(
+          "text-right whitespace-nowrap px-3",
+          "w-px": render_row_controls_on_the_left?,
+          "opacity-0 group-hover:opacity-100": row_controls_configurations[:show_on_hover],
+          "#{float_classes}": row_controls_configurations[:float]
+        )
       end
     end
   end

data/lib/avo/resources/items/holder.rb

@@ -25,7 +25,7 @@ class Avo::Resources::Items::Holder
       as = args.fetch(:as, nil)
 
       alert_type = :error
-      message = "There's an invalid field configuration for this resource. <br/> <code class='px-1 py-px rounded bg-red-600'>field :#{field_name}, as: :#{as}</code>"
+      message = "There's an invalid field configuration for this resource. <br/> <code class='px-1 py-px rounded-sm bg-red-600'>field :#{field_name}, as: :#{as}</code>"
 
       if as == :markdown
         alert_type = :warning

data/lib/avo/version.rb

@@ -1,3 +1,3 @@
 module Avo
-  VERSION = "3.17.0" unless const_defined?(:VERSION)
+  VERSION = "3.17.1.tw4" unless const_defined?(:VERSION)
 end

data/lib/generators/avo/resource_tool_generator.rb

@@ -32,7 +32,7 @@ module Generators
         end
 
         def in_code(text)
-          "<code class='p-1 rounded bg-gray-500 text-white text-sm'>#{text}</code>"
+          "<code class='p-1 rounded-sm bg-gray-500 text-white text-sm'>#{text}</code>"
         end
       end
     end

data/lib/generators/avo/templates/cards/partial_card_partial.tt

@@ -3,6 +3,6 @@
     Dashboard ID: <%%= @dashboard.id %>
     <br />
     <br />
-    Customize this partial under <code class='p-1 rounded bg-gray-500 text-white text-sm'>app/views/avo/cards/_<%= name.underscore %>.html.erb</code>
+    Customize this partial under <code class='p-1 rounded-sm bg-gray-500 text-white text-sm'>app/views/avo/cards/_<%= name.underscore %>.html.erb</code>
   </div>
 </div>

data/lib/generators/avo/tool_generator.rb

@@ -41,7 +41,7 @@ module Generators
         #   will generate the avo.lolo_path helper
         # THe fact that it will always generate the definded? and Avo::Engine.routes.draw wraps is unfortunate. We'd love a PR to fix that.
         route_contents = <<~ROUTE
-          
+
           if defined? ::Avo
             Avo::Engine.routes.draw do
               # This route is not protected, secure it with authentication if needed.
@@ -69,7 +69,7 @@ module Generators
         end
 
         def in_code(text)
-          "<code class='p-1 rounded bg-gray-500 text-white text-sm'>#{text}</code>"
+          "<code class='p-1 rounded-sm bg-gray-500 text-white text-sm'>#{text}</code>"
         end
       end
     end

data/lib/tasks/avo_tasks.rake

@@ -135,5 +135,5 @@ task "avo:yarn_install" do
   # tailwind.preset.js needs this dependencies in order to be required
   # Ensure that versions remain updated and synchronized with those specified in package.json.
   puts "[Avo->] Adding yarn dependencies"
-  `yarn add tailwindcss@^3.4.17 @tailwindcss/forms@^0.5.10 @tailwindcss/typography@^0.5.16 @tailwindcss/container-queries@^0.1.1 --cwd #{Avo::Engine.root}`
+  `yarn add tailwindcss@^4.0.0 @tailwindcss/forms@^0.5.10 @tailwindcss/typography@^0.5.16 @tailwindcss/container-queries@^0.1.1 --cwd #{Avo::Engine.root}`
 end