avo 2.5.2.pre.7 → 2.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a28573214bb7c1b862f5114ea719042e358600403459f69a138382276518bc11
-  data.tar.gz: edfaf30976abadb6d7cbe607c4c117d9cfe4887c8228302a29930e693ce861b5
+  metadata.gz: 886b0051c7a9b11b46dcd99cdb419559f1b7326d8b8a90a3514d110935bf6d05
+  data.tar.gz: 4e21cf6d49133dc5551fdfea9759366bedfd3d487dcfd1df562a40b808383ef2
 SHA512:
-  metadata.gz: 1f1ce11cfa12337091794ef94d22394e1187accfafb96c8bcbb15c8b875fff78ca2361e3047d165a4093572676a412e50b40e276520b384024bac3363e28c16f
-  data.tar.gz: b3c71dcdd9524704ecf3da845bbdecebb67e908e69da67b8cdc7a316c7d50b3a21398fc5fcadb68f45a690afa7d41f742ebf1f083fd41e542c436c5820668189
+  metadata.gz: 33608aef95479841514e639bd5e08c81f05a1fa4c73fa3067b59530774e7f11024a5f3e6f9c27e6a10125f9c6d9fef3684436b8b12deeb7c21d988ffa18379ed
+  data.tar.gz: ec6b40cda212f0a2ab04d0e672d099a5ebb672b2351cdfa0d8354c7b1ee3334704b5f128421e642d88da09b56fac98178ed7b7da93a370ee8cc53645419559df

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    avo (2.5.2.pre.7)
+    avo (2.6.0)
       active_link_to
       addressable
       breadcrumbs_on_rails

data/app/assets/stylesheets/avo.css

@@ -12,7 +12,6 @@
 @import './css/buttons.css';
 @import './css/typography.css';
 @import './css/tooltips.css';
-@import './css/alerts.css';
 @import './css/loader.css';
 @import './css/pagination.css';
 @import './css/breadcrumbs.css';
@@ -91,3 +90,36 @@ trix-editor {
   max-height: 320px !important;
   overflow-y: auto;
 }
+
+.scroll-shadows {
+  background:
+    /* Shadow Cover TOP */
+    linear-gradient(
+      #F6F6F7 30%,
+      #F6F6F7
+    ) center top,
+
+    /* Shadow Cover BOTTOM */
+    linear-gradient(
+      #F6F6F7,
+      #F6F6F7 70%
+    ) center bottom,
+
+    /* Shadow TOP */
+    radial-gradient(
+      farthest-side at 50% 0,
+      rgba(0, 0, 0, 0.2),
+      rgba(0, 0, 0, 0)
+    ) center top,
+
+    /* Shadow BOTTOM */
+    radial-gradient(
+      farthest-side at 50% 100%,
+      rgba(0, 0, 0, 0.2),
+      rgba(0, 0, 0, 0)
+    ) center bottom;
+
+  background-repeat: no-repeat;
+  background-size: 100% 34px, 100% 34px, 100% 14px, 100% 14px;
+  background-attachment: local, local, scroll, scroll;
+}

data/app/assets/stylesheets/css/search.css

@@ -32,7 +32,7 @@
 
 .aa-DetachedFormContainer,
 .aa-DetachedContainer .aa-Panel {
-  @apply bg-gray-100 border-b-0;
+  @apply bg-gray-50 border-b-0;
 }
 
 .aa-Form {

data/app/assets/svgs/heroicons/solid/user-remove.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+or<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
   <path d="M11 6a3 3 0 11-6 0 3 3 0 016 0zM14 17a6 6 0 00-12 0h12zM13 8a1 1 0 100 2h4a1 1 0 100-2h-4z"/>
 </svg>

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

@@ -3,7 +3,8 @@
   data-actions-picker-enabled-class="text-black hover:bg-blue-500 hover:text-white"
   data-actions-picker-disabled-class="cursor-wait text-gray-500"
 >
-  <%= a_button style: :primary,
+  <%= a_button style: :outline,
+    color: :primary,
     class: "focus:outline-none",
     icon: 'arrow-circle-right',
     icon_class: 'transform rotate-90',
@@ -34,7 +35,7 @@
             'actions-picker-target': action.standalone ? 'standaloneAction' : 'resourceAction',
             'disabled': disabled,
           },
-          class: "flex items-center px-4 py-4 w-full font-medium #{disabled ? 'text-gray-500' : 'text-black hover:bg-blue-500 hover:text-white'}" do %>
+          class: "flex items-center px-4 py-3 w-full font-semibold text-sm #{disabled ? 'text-gray-500' : 'text-black hover:bg-blue-500 hover:text-white'}" do %>
           <%= svg 'play', class: 'h-5 mr-1 inline' %> <%= action.action_name %>
         <% end %>
       <% end %>

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

@@ -13,7 +13,7 @@
           <%== message %>
         </p>
       </div>
-      <div class="ml-4 flex-shrink-0 flex">
+      <div class="ml-4 flex-shrink-0 flex items-center">
         <button data-action="alert#close" class="inline-flex text-white focus:outline-none focus:text-gray-300 transition ease-in-out duration-150">
           <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
             <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>

data/app/components/avo/alert_component.rb

@@ -12,7 +12,10 @@ class Avo::AlertComponent < ViewComponent::Base
   end
 
   def icon
-    return "x-circle" if is_error?
+    return "heroicons/solid/x-circle" if is_error?
+    return "heroicons/solid/exclamation" if is_warning?
+    return "heroicons/solid/exclamation-circle" if is_info?
+    return "heroicons/solid/check-circle" if is_success?
 
     "check-circle"
   end
@@ -21,15 +24,31 @@ class Avo::AlertComponent < ViewComponent::Base
     result = "max-w-lg w-full shadow-lg rounded px-4 py-3 rounded relative border text-white pointer-events-auto"
 
     result += if is_error?
-      " bg-red-400 border-red-700"
-    else
-      " bg-green-400 border-green-700"
+      " bg-red-400 border-red-600"
+    elsif is_success?
+      " bg-green-500 border-green-600"
+    elsif is_warning?
+      " bg-orange-400 border-orange-600"
+    elsif is_info?
+      " bg-blue-400 border-blue-600"
     end
 
     result
   end
 
   def is_error?
-    type.to_sym == :error
+    type.to_sym == :error || type.to_sym == :alert
+  end
+
+  def is_success?
+    type.to_sym == :success
+  end
+
+  def is_info?
+    type.to_sym == :notice || type.to_sym == :info
+  end
+
+  def is_warning?
+    type.to_sym == :warning
   end
 end

data/app/components/avo/button_component.rb

@@ -38,14 +38,15 @@ class Avo::ButtonComponent < ViewComponent::Base
   end
 
   def button_classes
-    classes = "button-component inline-flex flex-grow-0 items-center text-sm font-semibold leading-6 fill-current whitespace-nowrap transition duration-100 transform transition duration-100 cursor-pointer disabled:cursor-not-allowed disabled:opacity-70 border justify-center active:outline active:outline-1 #{@class}"
+    classes = "button-component inline-flex flex-grow-0 items-center font-semibold leading-6 fill-current whitespace-nowrap transition duration-100 transform transition duration-100 cursor-pointer disabled:cursor-not-allowed disabled:opacity-70 border justify-center active:outline active:outline-1 #{@class}"
 
     classes += " rounded" if @rounded.present?
 
     classes += style_classes
 
-    classes += @compact ? " px-1" : " px-4" # Same horizontal padding on all sizes
-    classes += spacing_classes
+    classes += horizontal_padding_classes
+    classes += vertical_padding_classes
+    classes += text_size_classes
 
     classes
   end
@@ -57,10 +58,14 @@ class Avo::ButtonComponent < ViewComponent::Base
   def full_content
     result = ""
     icon_classes = @icon_class
-    icon_classes += full_content_icon_classes
+    # space out the icon from the text if text is present
+    icon_classes += " mr-1" if content.present?
+    # add the icon height
+    icon_classes += icon_size_classes
 
+    # Add the icon
     result += helpers.svg(@icon, class: icon_classes) if @icon.present?
-    result += "<span class='w-0 m-0'>&nbsp;</span>"
+
     if content.present?
       result += "<span>#{content}</span>"
     end
@@ -96,49 +101,77 @@ class Avo::ButtonComponent < ViewComponent::Base
 
   private
 
-  def spacing_classes
+  def vertical_padding_classes
     case @size.to_sym
     when :xs
       " py-0"
     when :sm
       " py-1"
     when :md
-      " py-2"
+      " py-1.5"
     when :lg
+      " py-2"
+    when :xl
       " py-3"
     else
       ""
     end
   end
 
+  def horizontal_padding_classes
+    return " px-1" if @compact
+
+    case @size.to_sym
+    when :xs
+      " px-2"
+    when :sm
+      " px-3"
+    when :md
+      " px-3"
+    when :lg
+      " px-5"
+    when :xl
+      " px-6"
+    else
+      "px-4"
+    end
+  end
+
+  def text_size_classes
+    case @size.to_sym
+    when :xs
+      " text-xs"
+    else
+      " text-sm"
+    end
+  end
+
   def style_classes
     case @style
     when :primary
       " bg-primary-500 text-white border-primary-500 hover:bg-primary-600 hover:border-primary-600 active:border-primary-700 active:outline-primary-700 active:bg-primary-600"
     when :outline
       " bg-white text-#{@color}-500 border-#{@color}-500 hover:bg-#{@color}-100 active:bg-#{@color}-100 active:border-#{@color}-500 active:outline-#{@color}-500"
+    when :text
+      " text-#{@color}-500 active:outline-#{@color}-500 hover:bg-gray-100 border-transparent"
     else
       ""
     end
   end
 
-  def full_content_icon_classes
+  def icon_size_classes
     icon_classes = ""
 
     case @size
     when :xs
-      icon_classes += " h-4"
-      # When icon is solo we need to add an offset
-      icon_classes += " my-1" if content.blank?
+      icon_classes += " h-4 my-1"
     when :sm
-      icon_classes += " h-4"
-      # When icon is solo we need to add an offset
-      icon_classes += " my-1" if content.blank?
+      icon_classes += " h-4 my-1"
     when :md
-      icon_classes += " h-5"
-      # When icon is solo we need to add an offset
-      icon_classes += " my-0.5" if content.blank?
+      icon_classes += " h-4 my-1"
     when :lg
+      icon_classes += " h-5 my-0.5"
+    when :xl
       icon_classes += " h-6"
     end
 

data/app/components/avo/card_component.rb

@@ -3,9 +3,21 @@
 class Avo::CardComponent < ViewComponent::Base
   def initialize(card: nil)
     @card = card
+
+    init_card
   end
 
   def render?
     !@card.nil?
   end
+
+  # Initializing the card byt running the query method.
+  # We'll still keep the query block around for compatibility reasons.
+  def init_card
+    if @card.respond_to? :query
+      @card.query
+    elsif @card.query_block.present?
+      @card.compute_result
+    end
+  end
 end

data/app/components/avo/fields/concerns/item_labels.rb

@@ -0,0 +1,40 @@
+module Avo
+  module Fields
+    module Concerns
+      module ItemLabels
+        extend ActiveSupport::Concern
+
+        def value_for_item(item)
+          if @field.acts_as_taggable_on.present?
+            item["value"]
+          else
+            item
+          end
+        end
+
+        def label_from_item(item)
+          value = value_for_item item
+
+          if suggestions_are_a_hash?
+            return suggestions_by_id[value.to_s][:label] if suggestions_by_id[value.to_s].present?
+          end
+          value
+        end
+
+        def suggestions_by_id
+          return {} unless suggestions_are_a_hash?
+
+          @field.suggestions.map do |suggestion|
+            [suggestion[:value].to_s, suggestion]
+          end.to_h
+        end
+
+        def suggestions_are_a_hash?
+          return false if @field.suggestions.blank?
+
+          @field.suggestions.first.is_a? Hash
+        end
+      end
+    end
+  end
+end

data/app/components/avo/fields/tags_field/edit_component.html.erb

@@ -18,7 +18,7 @@
       data: {
         'tags-field-target': 'input',
         'whitelist-items': @field.suggestions.to_json,
-        'blacklist-items': @field.blacklist.to_json,
+        'disallowed-items': @field.disallowed.to_json,
         'enforce-suggestions': @field.enforce_suggestions ? 1 : 0,
         'delimiters': @field.delimiters,
         'close-on-select': @field.close_on_select ? 1 : 0,

data/app/components/avo/fields/tags_field/index_component.html.erb

@@ -1,11 +1,7 @@
 <%= index_field_wrapper field: @field do %>
   <div class="flex gap-1 items-center flex-nowrap">
     <% value.take(3).each do |item| %>
-      <% if @field.acts_as_taggable_on.present? %>
-        <%= render Avo::Fields::TagsField::TagComponent.new(label: item['value']) %>
-      <% else %>
-        <%= render Avo::Fields::TagsField::TagComponent.new(label: item) %>
-      <% end %>
+      <%= render Avo::Fields::TagsField::TagComponent.new(label: label_from_item(item)) %>
     <% end %>
     <% if value.count > 3 %>
       <%= render Avo::Fields::TagsField::TagComponent.new(label: '...', title: I18n.t('avo.x_items_more', count: value.count - 3)) %>

data/app/components/avo/fields/tags_field/index_component.rb

@@ -1,6 +1,8 @@
 # frozen_string_literal: true
 
 class Avo::Fields::TagsField::IndexComponent < Avo::Fields::IndexComponent
+  include Avo::Fields::Concerns::ItemLabels
+
   def value
     @field.field_value
   end

data/app/components/avo/fields/tags_field/show_component.rb

@@ -1,11 +1,7 @@
 # frozen_string_literal: true
 
+# require_relative 'item_labels'
+
 class Avo::Fields::TagsField::ShowComponent < Avo::Fields::ShowComponent
-  def label_from_item(item)
-    if @field.acts_as_taggable_on.present?
-      item['value']
-    else
-      item
-    end
-  end
+  include Avo::Fields::Concerns::ItemLabels
 end

data/app/components/avo/fields/tags_field/tag_component.html.erb

@@ -1,4 +1,4 @@
-<div class="flex px-2 py-1 rounded bg-gray-200 text-sm text-gray-800 font-normal flex-shrink-0"
+<div class="flex px-2 py-1 rounded bg-gray-100 text-sm text-gray-800 font-normal flex-shrink-0"
   <% if title.present? %>
     data-tippy="tooltip"
     title="<%= title %>"

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

@@ -14,7 +14,7 @@
       <% end %>
     <% end %>
     <div
-      class="absolute block inset-auto sm:right-0 top-full bg-white min-w-[300px] mt-2 z-20 shadow-modal rounded divide-y divide-gray-300 <%= 'hidden' unless params[:keep_filters_panel_open] %>"
+      class="absolute block inset-auto sm:right-0 top-full bg-white min-w-[300px] mt-2 z-20 shadow-modal rounded divide-y divide-gray-300 <%= 'hidden' unless params[:keep_filters_panel_open] == '1' %>"
       data-toggle-panel-target="panel"
     >
       <% @filters.each do |filter| %>

data/app/components/avo/index/field_wrapper_component.html.erb

@@ -1,4 +1,4 @@
-<td class="min-h-[3rem] px-3 leading-tight whitespace-nowrap h-full text-slate-800 <%= classes %>" data-field-id="<%= @field.id %>" data-field-type="<%= @field.type %>">
+<td class="min-h-[3rem] px-3 leading-tight whitespace-nowrap h-full text-slate-800 text-base <%= classes %>" data-field-id="<%= @field.id %>" data-field-type="<%= @field.type %>">
   <% if @field.value.blank? && @dash_if_blank %>
     —
   <% else %>

data/app/components/avo/index/grid_cover_empty_state_component.html.erb

@@ -1,3 +1,3 @@
-<div class="absolute bg-gray-100 w-full h-full">
+<div class="absolute bg-gray-50 w-full h-full">
   <%= helpers.svg 'avocado', class: 'relative transform -translate-x-1/2 -translate-y-1/2 h-20 text-gray-400 inset-auto top-1/2 left-1/2' %>
 </div>

data/app/components/avo/index/table_row_component.html.erb

@@ -1,5 +1,5 @@
 <tr
-  class="bg-white hover:bg-blue-50 hover:shadow-row hover:z-[21] relative z-20 border-b"
+  class="bg-white hover:bg-gray-50 hover:shadow-row hover:z-[21] relative z-20 border-b"
   <%== item_selector_init @resource %>
 >
   <% if @resource.record_selector %>

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

@@ -1,7 +1,7 @@
 <div <%== data_attributes %>>
   <% if render_header? %>
-    <div class="<%= white_panel_classes %> p-4 flex-1 flex flex-col xl:flex-row justify-between mb-6">
-      <div class="overflow-hidden mr-4 flex flex-col">
+    <div class="flex-1 flex flex-col xl:flex-row justify-between mb-4">
+      <div class="overflow-hidden flex flex-col">
         <% if display_breadcrumbs? %>
           <div class="breadcrumbs truncate mb-2">
             <%= helpers.render_breadcrumbs(separator: helpers.svg('chevron-right', class: 'inline-block h-3 stroke-current relative top-[-1px] ml-1' )) if Avo.configuration.display_breadcrumbs %>
@@ -13,7 +13,7 @@
         </div>
 
         <% if description.present? %>
-        <div class="text-base tracking-normal font-medium text-gray-600" data-target="description">
+        <div class="text-sm tracking-normal font-medium text-gray-600" data-target="description">
           <%== description %>
         </div>
         <% end %>

data/app/components/avo/panel_component.rb

@@ -21,7 +21,7 @@ class Avo::PanelComponent < ViewComponent::Base
   private
 
   def white_panel_classes
-    'bg-white rounded shadow'
+    "bg-white rounded shadow"
   end
 
   def data_attributes

data/app/components/avo/resource_component.rb

@@ -11,6 +11,26 @@ class Avo::ResourceComponent < Avo::BaseComponent
     @resource.authorization.authorize_action(:destroy, raise_exception: false)
   end
 
+  def can_detach?
+    authorize_association_for("detach")
+  end
+
+  def can_see_the_edit_button?
+    @resource.authorization.authorize_action(:edit, raise_exception: false)
+  end
+
+  def can_see_the_destroy_button?
+    @resource.authorization.authorize_action(:destroy, raise_exception: false)
+  end
+
+  def detach_path
+    helpers.resource_detach_path(params[:resource_name], params[:id], @reflection.name.to_s, @resource.model.id)
+  end
+
+  def destroy_path
+    helpers.resource_path(model: @resource.model, resource: @resource)
+  end
+
   def authorize_association_for(policy_method)
     association_policy = true
 
@@ -30,4 +50,34 @@ class Avo::ResourceComponent < Avo::BaseComponent
 
     association_policy
   end
+
+  def split_panel_fields
+    initialize_panels
+    @resource.get_fields.each do |field|
+      case field.class.to_s
+      when "Avo::Fields::HasOneField"
+        @has_one_panels << field
+      when "Avo::Fields::HasManyField"
+        @has_many_panels << field
+      when "Avo::Fields::HasAndBelongsToManyField"
+        @has_as_belongs_to_many_panels << field
+      else
+        @fields_by_panel[field.panel_name] ||= []
+        @fields_by_panel[field.panel_name] << field
+      end
+    end
+  end
+
+  private
+
+  def initialize_panels
+    @fields_by_panel = {}
+    @has_one_panels = []
+    @has_many_panels = []
+    @has_as_belongs_to_many_panels = []
+  end
+
+  def via_resource?
+    params[:via_resource_class].present? && params[:via_resource_id].present?
+  end
 end

data/app/components/avo/sidebar/group_component.html.erb

@@ -7,7 +7,9 @@
   <% end %>
 >
   <% if item.name.present? %>
-    <div class="flex justify-between px-10 pt-2 pb-0 text-gray-600 ">
+    <div
+      class="flex justify-between px-10 pr-2 pt-2 pb-0 text-gray-400"
+    >
       <div class="flex items-center text-xs uppercase font-semibold leading-none">
         <%= item.name %>
       </div>
@@ -17,7 +19,7 @@
           data-menu-target="svg"
           data-menu-key-param="<%= key %>"
           >
-          <%= helpers.svg 'heroicons/outline/chevron-down', class: "h-4"%>
+          <%= helpers.svg 'heroicons/outline/chevron-down', class: "h-4 mr-0.5"%>
         </div>
       <% end %>
     </div>

data/app/components/avo/sidebar/heading_component.html.erb

@@ -1,4 +1,4 @@
-<div class="flex justify-between p-4 py-2 text-gray-500">
+<div class="flex justify-between px-4 pr-2 py-1 text-gray-500">
   <div class="flex items-center text-sm uppercase font-semibold leading-none space-x-1">
     <span class="min-w-[20px]"><%= icon %></span> <span><%= label %></span>
   </div>

data/app/components/avo/sidebar/link_component.html.erb

@@ -2,7 +2,7 @@
   <%= send link_method, path, class: classes, active: active, target: target do %>
     <%= label %>
     <% if target == :_blank %>
-      <%= helpers.svg('heroicons/outline/external-link', class: 'self-center ml-auto h-3') %>
+      <%= helpers.svg('heroicons/outline/external-link', class: 'self-center ml-auto h-3 mr-2') %>
     <% end %>
   <% end %>
 <% else %>

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

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

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

@@ -1,24 +1,16 @@
 <div
-  class="fixed z-[60] application-sidebar hidden lg:flex h-full bg-white text-white w-64 border-r <%= 'print:hidden' if Avo.configuration.hide_layout_when_printing %>"
+  class="fixed z-[60] t-0 application-sidebar hidden lg:flex flex-1 border-r lg:border-none bg-none min-w-[16rem] h-[calc(100vh-4rem)] bg-gray-25 lg:bg-transparent <%= 'print:hidden' if Avo.configuration.hide_layout_when_printing %>"
   data-mobile-target="sidebar"
 >
   <div class="flex flex-col w-full h-full">
-    <div class="flex justify-between">
-      <%= render partial: "avo/partials/logo" %>
-      <div class="flex items-center mr-4">
-        <%= helpers.a_button class: "lg:hidden", icon: 'menu-back', data: { action: 'click->mobile#toggleSidebar' } %>
-      </div>
-    </div>
-    <div class="flex-1 flex flex-col justify-between overflow-auto mt-3">
+    <div class="flex-1 flex flex-col justify-between overflow-auto h-full pt-3 scroll-shadows">
       <div class="space-y-6 mb-4">
         <%= render Avo::Sidebar::LinkComponent.new label: 'Get started', path: helpers.avo.root_path, active: :exclusive if Rails.env.development? && Avo.configuration.home_path.nil? %>
 
         <% if Avo::App.has_main_menu? %>
-          <div class="text-black">
-            <% Avo::App.main_menu.items.each do |item| %>
-              <%= render Avo::Sidebar::ItemSwitcherComponent.new item: item %>
-            <% end %>
-          </div>
+          <% Avo::App.main_menu.items.each do |item| %>
+            <%= render Avo::Sidebar::ItemSwitcherComponent.new item: item %>
+          <% end %>
         <% else %>
 
           <% if dashboards.present? %>

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

@@ -1,4 +1,4 @@
-<div class="text-black border-t border-gray-200 p-4 flex">
+<div class="text-black border-gray-200 p-4 flex">
   <div class="flex-1 flex space-x-4">
     <% if avatar.present? %>
       <div class="relative aspect-square w-10 h-10 overflow-hidden rounded">