tramway 4.0.1.2 → 4.0.1.4

data/app/components/tramway/nav/item_component.rb

@@ -7,10 +7,18 @@ module Tramway
     class ItemComponent < TailwindComponent
       def style
         @style ||= [
-          'tramway-navbar-item inline-flex items-center rounded-md px-4 py-3 text-base font-medium text-zinc-100',
-          'transition-colors hover:bg-zinc-800 hover:text-zinc-50 sm:px-3 sm:py-2 sm:text-sm'
+          'tramway-navbar-item inline-flex items-center gap-2 rounded-md px-4 py-3 text-base font-medium',
+          'text-zinc-100 transition-colors hover:bg-zinc-800 hover:text-zinc-50 sm:px-3 sm:py-2 sm:text-sm'
         ].join(' ')
       end
+
+      def icon?
+        @icon.present?
+      end
+
+      def icon_classes
+        [@icon, 'tramway-navbar-item-icon w-5 shrink-0 text-center'].join(' ')
+      end
     end
   end
 end

data/app/components/tramway/navbar_component.html.haml

@@ -114,21 +114,16 @@
       })();
 
     :css
-      .tramway-navbar-desktop-vertical .tramway-navbar-item {
-        width: 100%;
-      }
-
-      .tramway-navbar-desktop-vertical .tramway-navbar-item > a,
-      .tramway-navbar-desktop-vertical .tramway-navbar-item > form {
+      .tramway-navbar-desktop-vertical li.whitespace-nowrap {
         width: 100%;
       }
 
-      .tramway-navbar-desktop-vertical .tramway-navbar-item > form {
+      .tramway-navbar-desktop-vertical li.whitespace-nowrap > form {
         display: block;
+        width: 100%;
       }
 
-      .tramway-navbar-desktop-vertical .tramway-navbar-item > a,
-      .tramway-navbar-desktop-vertical .tramway-navbar-item > form > button {
+      .tramway-navbar-desktop-vertical .tramway-navbar-item {
         width: 100%;
         justify-content: flex-start;
       }
@@ -142,12 +137,26 @@
           padding-left: 6rem;
         }
 
-        html[data-tramway-navbar-expanded="false"] #desktop-navbar-header,
-        html[data-tramway-navbar-expanded="false"] #desktop-navbar-content {
+        html[data-tramway-navbar-expanded="false"] #desktop-navbar-header {
           opacity: 0;
           pointer-events: none;
         }
 
+        html[data-tramway-navbar-expanded="false"] #desktop-navbar-content {
+          opacity: 1;
+          pointer-events: auto;
+        }
+
+        html[data-tramway-navbar-expanded="false"] #desktop-navbar-content .tramway-navbar-item-label {
+          display: none;
+        }
+
+        html[data-tramway-navbar-expanded="false"] #desktop-navbar-content .tramway-navbar-item {
+          justify-content: center;
+          padding-left: 0;
+          padding-right: 0;
+        }
+
         html[data-tramway-navbar-expanded="false"] #desktop-navbar-toggle-wrapper {
           justify-content: center;
         }

data/app/components/tramway/navbar_component.rb

@@ -7,6 +7,10 @@ module Tramway
       bg-zinc-950 text-zinc-50
     ].freeze
 
+    NAVBAR_FIXED_CLASSES = %w[
+      fixed top-0 left-0 z-40 w-screen
+    ].freeze
+
     HORIZONTAL_NAVBAR_CLASSES = %w[
       flex items-center justify-between border-zinc-800 px-4 py-3 shadow-sm backdrop-blur sm:px-6
     ].freeze
@@ -40,7 +44,7 @@ module Tramway
     end
 
     def navbar_classes
-      classes = NAVBAR_BASE_CLASSES.dup
+      classes = NAVBAR_BASE_CLASSES.dup + NAVBAR_FIXED_CLASSES
       classes.concat(HORIZONTAL_NAVBAR_CLASSES) if horizontal?
       classes.concat(VERTICAL_NAVBAR_CLASSES + VERTICAL_DESKTOP_NAVBAR_CLASSES) if vertical?
 

data/app/components/tramway/pagination/first_page_component.html.haml

@@ -2,9 +2,4 @@
   = link_to helpers.t('views.pagination.first').html_safe,
     url,
     remote:,
-    class: pagination_classes(klass: 'first hidden sm:flex')
-
-  = link_to '⭰',
-    url,
-    remote:,
-    class: pagination_classes(klass: 'first sm:hidden flex font-bold')
+    class: pagination_classes(klass: 'first max-sm:hidden')

data/app/components/tramway/pagination/last_page_component.html.haml

@@ -2,9 +2,4 @@
   = link_to helpers.t('views.pagination.last').html_safe,
     url,
     remote:,
-    class: pagination_classes(klass: 'last hidden sm:flex')
-
-  = link_to '⭲',
-    url,
-    remote:,
-    class: pagination_classes(klass: 'last sm:hidden flex font-bold')
+    class: pagination_classes(klass: 'last max-sm:hidden')

data/app/components/tramway/pagination/next_page_component.html.haml

@@ -3,7 +3,7 @@
     url,
     rel: 'next',
     remote:,
-    class: pagination_classes(klass: 'next hidden sm:flex')
+    class: pagination_classes(klass: 'next max-sm:hidden')
 
   = link_to '🠖',
     url,

data/app/components/tramway/pagination/page_component.html.haml

@@ -6,4 +6,4 @@
     url,
     remote:,
     rel: page.rel,
-    class: pagination_classes(klass: 'hidden sm:flex')
+    class: pagination_classes(klass: 'max-sm:hidden')

data/app/components/tramway/pagination/prev_page_component.html.haml

@@ -3,7 +3,7 @@
     url,
     rel: 'prev',
     remote:,
-    class: pagination_classes(klass: 'prev hidden sm:flex')
+    class: pagination_classes(klass: 'prev max-sm:hidden')
 
   = link_to '🠔',
     url,

data/app/components/tramway/table/cell_component.rb

@@ -5,11 +5,11 @@ module Tramway
     # Component for rendering a cell in a table
     class CellComponent < Tramway::BaseComponent
       SIZE_CLASSES = {
-        small: 'div-table-cell hidden bg-transparent px-4 py-2 text-sm font-medium text-zinc-100 first:block md:block',
-        medium: 'div-table-cell hidden bg-transparent px-6 py-4 text-base font-medium ' \
-                'text-zinc-100 first:block md:block',
-        large: 'div-table-cell hidden bg-transparent px-6 py-6 text-lg font-medium ' \
-               'text-zinc-100 first:block md:block'
+        small: 'div-table-cell truncate min-w-0 bg-transparent px-4 py-2 text-sm font-medium text-zinc-100',
+        medium: 'div-table-cell truncate min-w-0 bg-transparent px-6 py-4 text-base font-medium ' \
+                'text-zinc-100',
+        large: 'div-table-cell truncate min-w-0 bg-transparent px-6 py-6 text-lg font-medium ' \
+               'text-zinc-100'
       }.freeze
 
       option :options, optional: true, default: -> { {} }

data/app/components/tramway/table/grid_columns.rb

@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+module Tramway
+  module Table
+    # Builds the CSS grid template used by table rows/headers so that every
+    # column keeps a minimum readable width. When the sum of those minimums
+    # exceeds the viewport, the table overflows its scroll container instead
+    # of hiding columns, giving mobile a full, horizontally scrollable table.
+    module GridColumns
+      MIN_COLUMN_WIDTHS = {
+        small: '8rem',
+        medium: '10rem',
+        large: '12rem'
+      }.freeze
+
+      # Matches the rem value of the row/header `gap-*` class for each size, so the
+      # computed min-width below accounts for the gaps between grid tracks.
+      GAP_WIDTHS_REM = {
+        small: 0.5,
+        medium: 1,
+        large: 1.5
+      }.freeze
+
+      private
+
+      # Column widths are set via an inline style (not a Tailwind class) because the class name
+      # would be built dynamically from the columns count, and Tailwind's build only generates
+      # utilities for class names it can find literally in the source.
+      #
+      # `min-width` is set to the full content width (all column minimums plus gaps) so that,
+      # once the row/header no longer fits its container, the row's own box grows to match —
+      # keeping its background and borders aligned with the horizontally scrolled columns
+      # instead of clipping at the container's width.
+      def grid_template_style(columns_count)
+        size = tramway_table_size
+        min_width = MIN_COLUMN_WIDTHS.fetch(size) { MIN_COLUMN_WIDTHS[:medium] }
+        gap_width = GAP_WIDTHS_REM.fetch(size) { GAP_WIDTHS_REM[:medium] }
+        total_min_width = (columns_count * min_width.to_f) + ([columns_count - 1, 0].max * gap_width)
+
+        "grid-template-columns: repeat(#{columns_count}, minmax(#{min_width}, 1fr)); " \
+          "min-width: #{total_min_width}rem"
+      end
+    end
+  end
+end

data/app/components/tramway/table/header_component.html.haml

@@ -1,5 +1,5 @@
 - parsed_cells = headers.any? ? nil : visible_cells_from(content)
-%div{ class: [options[:class], "#{header_row_classes} md:grid-cols-#{columns_count(parsed_cells: parsed_cells)}"].compact.join(' '), aria: { label: "Table Header" }, role: "row", **options.except(:class) }
+%div{ class: [options[:class], header_row_classes].compact.join(' '), style: grid_template_style(columns_count(parsed_cells: parsed_cells)), aria: { label: "Table Header" }, role: "row", **options.except(:class) }
   - if headers.any?
     - headers.each do |header|
       .div-table-cell.border-b.border-zinc-800{ class: header_cell_classes }

data/app/components/tramway/table/header_component.rb

@@ -5,19 +5,20 @@ module Tramway
     # Component for rendering a header in a table
     class HeaderComponent < Tramway::BaseComponent
       include ContentCells
+      include GridColumns
 
       SIZE_CLASSES = {
         small: {
-          row: 'div-table-row grid grid-cols-1 gap-2 rounded-t-xl border-b border-zinc-800 bg-zinc-900 text-zinc-400',
-          cell: 'div-table-cell hidden px-4 py-2 first:block md:block'
+          row: 'div-table-row grid gap-2 rounded-t-xl border-b border-zinc-800 bg-zinc-900 text-zinc-400',
+          cell: 'div-table-cell truncate min-w-0 px-4 py-2'
         },
         medium: {
-          row: 'div-table-row grid grid-cols-1 gap-4 rounded-t-xl border-b border-zinc-800 bg-zinc-900 text-zinc-400',
-          cell: 'div-table-cell hidden px-6 py-4 first:block md:block'
+          row: 'div-table-row grid gap-4 rounded-t-xl border-b border-zinc-800 bg-zinc-900 text-zinc-400',
+          cell: 'div-table-cell truncate min-w-0 px-6 py-4'
         },
         large: {
-          row: 'div-table-row grid grid-cols-1 gap-6 rounded-t-xl border-b border-zinc-800 bg-zinc-900 text-zinc-400',
-          cell: 'div-table-cell hidden px-6 py-6 first:block md:block'
+          row: 'div-table-row grid gap-6 rounded-t-xl border-b border-zinc-800 bg-zinc-900 text-zinc-400',
+          cell: 'div-table-cell truncate min-w-0 px-6 py-6'
         }
       }.freeze
 

data/app/components/tramway/table/row_component.html.haml

@@ -1,5 +1,5 @@
 - if cells.any?
-  = row_tag class: desktop_row_classes(cells.count), **options do
+  = row_tag class: row_grid_classes, style: grid_template_style(cells.count), **options.except(:class, :style) do
     - cells.each do |(_, value)|
       %div.border-b.border-zinc-800{ class: cell_classes }
         = value
@@ -8,15 +8,8 @@
   - cells = visible_cells_from(content)
 
   - if href.present?
-    = tag.a href:, class: [desktop_row_classes(cells.count), link_row_classes, options[:class]].join(' '), **default_attributes, **options.except(:class) do
+    = tag.a href:, class: [row_grid_classes, link_row_classes, options[:class]].join(' '), style: grid_template_style(cells.count), **default_attributes, **options.except(:class, :style) do
       = content
   - else
-    - if preview
-      = component 'tramway/table/row/preview' do
-        - cells.each_with_index do |cell, index|
-          - next if index.zero?
-
-          = cell.to_s.html_safe
-
-    = tag.div class: [desktop_row_classes(cells.count), options[:class]].join(' '), data: { action: "click->table-row-preview#toggle", controller: "table-row-preview" }, **default_attributes, **options.except(:class) do
+    = tag.div class: [row_grid_classes, options[:class]].join(' '), style: grid_template_style(cells.count), **default_attributes, **options.except(:class, :style) do
       = content

data/app/components/tramway/table/row_component.rb

@@ -5,25 +5,27 @@ module Tramway
     # Component for rendering a row in a table
     class RowComponent < Tramway::BaseComponent
       include ContentCells
+      include GridColumns
 
       SIZE_CLASSES = {
         small: {
-          row: 'div-table-row grid grid-cols-1 gap-2 border-b border-zinc-800 bg-transparent last:border-b-0',
-          cell: 'div-table-cell bg-transparent px-4 py-2 text-sm font-medium text-zinc-100 sm:text-sm'
+          row: 'div-table-row grid gap-2 border-b border-zinc-800 bg-transparent last:border-b-0',
+          cell: 'div-table-cell truncate min-w-0 bg-transparent px-4 py-2 text-sm font-medium ' \
+                'text-zinc-100 sm:text-sm'
         },
         medium: {
-          row: 'div-table-row grid grid-cols-1 gap-4 border-b border-zinc-800 bg-transparent last:border-b-0',
-          cell: 'div-table-cell bg-transparent px-6 py-4 text-xs font-medium text-zinc-100 sm:text-base'
+          row: 'div-table-row grid gap-4 border-b border-zinc-800 bg-transparent last:border-b-0',
+          cell: 'div-table-cell truncate min-w-0 bg-transparent px-6 py-4 text-xs ' \
+                'font-medium text-zinc-100 sm:text-base'
         },
         large: {
-          row: 'div-table-row grid grid-cols-1 gap-6 border-b border-zinc-800 bg-transparent last:border-b-0',
-          cell: 'div-table-cell bg-transparent px-6 py-6 text-lg font-medium text-zinc-100'
+          row: 'div-table-row grid gap-6 border-b border-zinc-800 bg-transparent last:border-b-0',
+          cell: 'div-table-cell truncate min-w-0 bg-transparent px-6 py-6 text-lg font-medium text-zinc-100'
         }
       }.freeze
 
       option :cells, optional: true, default: -> { [] }
       option :href, optional: true
-      option :preview, optional: true, default: -> { true }
       option :options, optional: true, default: -> { {} }
 
       def default_attributes
@@ -42,8 +44,8 @@ module Tramway
         end
       end
 
-      def desktop_row_classes(cells_count)
-        "#{size_classes.fetch(:row)} md:grid-cols-#{cells_count}"
+      def row_grid_classes
+        size_classes.fetch(:row)
       end
 
       def link_row_classes

data/app/components/tramway/table_component.rb

@@ -9,7 +9,8 @@ module Tramway
     option :options, optional: true, default: -> { {} }
 
     def table_classes
-      'div-table w-full bg-zinc-950 text-left rtl:text-right text-zinc-100'
+      'div-table w-full max-w-full min-w-0 overflow-x-auto tramway-scrollbar bg-zinc-950 text-left rtl:text-right ' \
+        'text-zinc-100'
     end
 
     def around_render

data/app/views/tramway/entities/_list.html.haml

@@ -16,7 +16,9 @@
           path: Tramway::Engine.routes.url_helpers.public_send(@entity.routes.new),
           type: :will
 
-      = decorator.constantize.index_header_content.call(@entities) if decorator.constantize.index_header_content.present?
+  - if decorator.constantize.index_header_content.present?
+    .mt-4
+      = decorator.constantize.index_header_content.call(@entities)
 
   .flex.flex-row.justify-end.mt-2.gap-4
     - if @entity.page(:index).search
@@ -37,5 +39,7 @@
       - @entities.each do |item|
         = component 'tramway/entity', entity: @entity, item: item
 
-      .flex.mt-4
-        = paginate @entities, custom_path_method:
+    .flex.flex-col.items-center.mt-4.gap-2
+      = paginate @entities, custom_path_method:
+      %p.sm:hidden.text-xs.text-zinc-500
+        = page_entries_info @entities

data/config/tailwind.config.js

@@ -6,6 +6,9 @@ const buildUtilities = (prefix, start, end) =>
 module.exports = {
   safelist: [
     // === Navbar ===
+    'w-5',
+    'shrink-0',
+    'text-center',
     'ml-4',
     'text-white',
     'md:flex',
@@ -21,6 +24,8 @@ module.exports = {
     'w-72',
     'z-50',
     'inset-0',
+    'sticky',
+    'left-0',
     'top-0',
     'top-4',
     'right-6',
@@ -51,6 +56,7 @@ module.exports = {
     'md:overflow-hidden',
     'md:pl-72',
     'md:pl-24',
+    'md:pt-0',
     'transition-all',
     'ease-in-out',
     'md:transition-[width]',
@@ -246,8 +252,9 @@ module.exports = {
     'div-table-cell',
     'sm:text-base',
     'last:border-b-0',
-    'md:block',
-    'first:block',
+    'overflow-x-auto',
+    'truncate',
+    'min-w-0',
     'rounded-t-xl',
     'border-zinc-800',
     'bg-zinc-950',
@@ -257,24 +264,17 @@ module.exports = {
     'hover:bg-zinc-900',
     'border-b',
     'border-r',
-    'grid-cols-1',
+    'gap-2',
     'gap-4',
+    'gap-6',
+    'px-4',
     'px-6',
+    'py-2',
     'py-4',
+    'py-6',
     'font-medium',
     'w-full',
 
-    // === Table row preview panel ===
-    'bottom-0',
-    'left-0',
-    'right-0',
-    'h-1/2',
-    'bg-gray-100',
-    'animate-roll-up',
-    'hover:text-gray-700',
-    'pt-4',
-    'md:hidden',
-
     // === Title Component ===
     'md:text-4xl',
 
@@ -373,6 +373,7 @@ module.exports = {
     'align-center',
     'justify-center',
     'min-h-dvh',
+    'min-w-full',
     'bg-zinc-950',
     'text-zinc-50',
 
@@ -392,6 +393,7 @@ module.exports = {
     // === Responsive visibility helpers ===
     'sm:hidden',
     'sm:flex',
+    'max-sm:hidden',
 
     // === Sizing utilities ===
     'w-full',
@@ -417,6 +419,7 @@ module.exports = {
     'mb-4',
     'mb-2',
     'mt-8',
+    'mt-4',
     'mt-2',
 
     // === Pagination styles ===

data/lib/generators/tramway/install/install_generator.rb

@@ -19,6 +19,7 @@ module Tramway
 
           .tramway-scrollbar::-webkit-scrollbar {
             width: 0.5rem;
+            height: 0.5rem;
           }
 
           .tramway-scrollbar::-webkit-scrollbar-track {
@@ -114,7 +115,7 @@ module Tramway
 
       def stimulus_controller_imports
         [
-          'import { Navbar, TramwaySelect, TableRowPreview, UiCheckbox, Tooltip } from "@tramway/tramway"'
+          'import { Navbar, TramwaySelect, UiCheckbox, Tooltip } from "@tramway/tramway"'
         ]
       end
 
@@ -122,7 +123,6 @@ module Tramway
         [
           "application.register('tramway-navbar', Navbar)",
           "application.register('tramway-select', TramwaySelect)",
-          "application.register('table-row-preview', TableRowPreview)",
           "application.register('ui--checkbox', UiCheckbox)",
           "application.register('tramway-tooltip', Tooltip)"
         ]

data/lib/tramway/helpers/views_helper.rb

@@ -46,7 +46,6 @@ module Tramway
         component 'tramway/table/row',
                   cells: options.delete(:cells),
                   href: options.delete(:href),
-                  preview: options.delete(:preview),
                   options:,
                   &
       end
@@ -121,8 +120,9 @@ module Tramway
 
         return classes.join(' ') if @tramway_navbar_direction.nil?
 
-        classes = classes.reject { _1.start_with?('md:pl-') || _1.start_with?('md:pr-') }
-        classes << 'md:pl-72' if @tramway_navbar_direction == :vertical
+        classes = classes.reject { _1.start_with?('md:pl-') || _1.start_with?('md:pr-') || _1 == 'pt-16' }
+        classes << 'pt-16'
+        classes << 'md:pl-72' << 'md:pt-0' if @tramway_navbar_direction == :vertical
 
         classes.join(' ')
       end

data/lib/tramway/navbar.rb

@@ -35,13 +35,13 @@ module Tramway
       reset_filling
     end
 
-    def item(text_or_url, url = nil, **, &)
+    def item(text_or_url, url = nil, icon: nil, **, &)
       raise 'You cannot provide an argument and a code block at the same time' if provided_url_and_block?(url, &)
 
       if url.present?
-        render_ignoring_block(text_or_url, url, **)
+        render_ignoring_block(text_or_url, url, icon:, **)
       else
-        render_using_block(text_or_url, **, &)
+        render_using_block(text_or_url, icon:, **, &)
       end => rendered_item
 
       @items[@filling] << rendered_item
@@ -73,8 +73,9 @@ module Tramway
       @filling = nil
     end
 
-    def render_ignoring_block(text_or_url, url, method: nil, **options)
-      options.merge!(href: url)
+    def render_ignoring_block(text_or_url, url, method: nil, icon: nil, **options)
+      options.merge!(href: url, icon:)
+      apply_icon_accessibility_attributes(options, label: text_or_url, icon:)
 
       if method.present? && method.to_sym != :get
         context.render(Tramway::Nav::Item::ButtonComponent.new(method:, **options)) { text_or_url }
@@ -83,8 +84,8 @@ module Tramway
       end
     end
 
-    def render_using_block(text_or_url, method: nil, **options, &)
-      options.merge!(href: text_or_url)
+    def render_using_block(text_or_url, method: nil, icon: nil, **options, &)
+      options.merge!(href: text_or_url, icon:)
 
       if method.present? && method.to_sym != :get
         context.render(Tramway::Nav::Item::ButtonComponent.new(method:, **options), &)
@@ -92,5 +93,12 @@ module Tramway
         context.render(Tramway::Nav::Item::LinkComponent.new(method:, **options), &)
       end
     end
+
+    def apply_icon_accessibility_attributes(options, label:, icon:)
+      return if icon.blank?
+
+      options[:title] = label if options[:title].blank?
+      options[:'aria-label'] = label if options[:'aria-label'].blank?
+    end
   end
 end

data/lib/tramway/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Tramway
-  VERSION = '4.0.1.2'
+  VERSION = '4.0.1.4'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: tramway
 version: !ruby/object:Gem::Version
-  version: 4.0.1.2
+  version: 4.0.1.4
 platform: ruby
 authors:
 - kalashnikovisme
@@ -267,10 +267,9 @@ files:
 - app/components/tramway/table/cell_component.html.haml
 - app/components/tramway/table/cell_component.rb
 - app/components/tramway/table/content_cells.rb
+- app/components/tramway/table/grid_columns.rb
 - app/components/tramway/table/header_component.html.haml
 - app/components/tramway/table/header_component.rb
-- app/components/tramway/table/row/preview_component.html.haml
-- app/components/tramway/table/row/preview_component.rb
 - app/components/tramway/table/row_component.html.haml
 - app/components/tramway/table/row_component.rb
 - app/components/tramway/table_component.html.haml

data/app/components/tramway/table/row/preview_component.html.haml

@@ -1,34 +0,0 @@
-:css
-  @keyframes roll-up {
-    0% {
-      transform: translateY(100%);
-    }
-
-    100% {
-      transform: translateY(0%);
-    }
-  }
-
-  .animate-roll-up {
-    animation: roll-up 0.5s ease-in-out;
-  }
-
-  @keyframes roll-down {
-    0% {
-      transform: translateY(0%);
-    }
-
-    100% {
-      transform: translateY(100%);
-    }
-  }
-
-  .animate-roll-down {
-    animation: roll-down 0.5s ease-in-out;
-  }
-
-#roll-up{ class: preview_classes, data: { controller: 'table-row-preview' } }
-  %button{ class: close_button_classes, "data-action" => "click->table-row-preview#close" }
-    ✕
-
-  = content

data/app/components/tramway/table/row/preview_component.rb

@@ -1,23 +0,0 @@
-# frozen_string_literal: true
-
-module Tramway
-  module Table
-    module Row
-      # Row component for rendering a row in a table
-      class PreviewComponent < Tramway::BaseComponent
-        def preview_classes
-          theme_classes(
-            classic: 'fixed hidden md:hidden bottom-0 left-0 right-0 w-screen shadow-lg z-50 bg-gray-900 ' \
-                     'animate-roll-up h-1/2 pt-4'
-          )
-        end
-
-        def close_button_classes
-          theme_classes(
-            classic: 'absolute top-4 right-4 text-gray-500 hover:text-gray-700'
-          )
-        end
-      end
-    end
-  end
-end