fix: モバイルの時にタブが崩れるのを修正

kufu · May 13, 2024 · 8b4ff44 · 8b4ff44
1 parent b490f8f
commit 8b4ff44
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 6 deletions.
diff --git a/app/views/plans/show.html.erb b/app/views/plans/show.html.erb
@@ -98,9 +98,9 @@
     <% else %>
       <div data-controller="schedule-table" class="max-w-[1120px] mx-auto">
         <div class="flex overflow-x-auto overflow-y-hidden gap-2 p-0">
-          <div class="relative flex sm:block justify-between flex-grow shrink-0 basis-auto m-1 before:absolute before:left-0 before:right-0 before:bottom-0 before:border-b-[1px]">
+          <div class="relative flex sm:block justify-center flex-grow shrink-0 basis-auto m-1 before:absolute before:left-0 before:right-0 before:bottom-0 before:border-b-[1px]">
             <% @plans_table.keys.map do |k| %>
-              <button data-action="click->schedule-table#switch" value="<%= k %>" class="tab-button bg-transparent appearance-none font-bold font-base text-[rgb(112,109,101)] h-10 solid border-0 border-b-[3px] px-2 sm:px-6 box-border border-b-transparent hover:bg-[rgb(248,247,246)] hover:text-[rgb(35,34,30)]">
+              <button data-action="click->schedule-table#switch" value="<%= k %>" class="tab-button bg-transparent appearance-none font-bold font-base text-[rgb(112,109,101)] h-10 solid border-0 border-b-[3px] px-4 sm:px-6 box-border border-b-transparent hover:bg-[rgb(248,247,246)] hover:text-[rgb(35,34,30)]">
                 <%= k %>
               </button>
             <% end %>

diff --git a/app/views/schedules/index.html.erb b/app/views/schedules/index.html.erb
@@ -21,9 +21,9 @@
     </div>
   </label>
   <div class="flex overflow-x-auto overflow-y-hidden gap-2 p-0">
-    <div class="relative flex sm:block justify-between flex-grow shrink-0 basis-auto m-1 before:absolute before:left-0 before:right-0 before:bottom-0 before:border-b-[1px]">
+    <div class="relative flex sm:block justify-center flex-grow shrink-0 basis-auto m-1 before:absolute before:left-0 before:right-0 before:bottom-0 before:border-b-[1px]">
       <% @schedule_table.days.each do |day| %>
-        <button data-action="click->schedule-table#switch" value="<%= day %>" class="tab-button bg-transparent appearance-none font-bold font-base text-[rgb(112,109,101)] h-10 solid border-0 border-b-[3px] px-2 sm:px-6 box-border border-b-transparent hover:bg-[rgb(248,247,246)] hover:text-[rgb(35,34,30)]">
+        <button data-action="click->schedule-table#switch" value="<%= day %>" class="tab-button bg-transparent appearance-none font-bold font-base text-[rgb(112,109,101)] h-10 solid border-0 border-b-[3px] px-4 sm:px-6 box-border border-b-transparent hover:bg-[rgb(248,247,246)] hover:text-[rgb(35,34,30)]">
           <%= day %>
         </button>
       <% end %>

diff --git a/app/views/teams/show.html.erb b/app/views/teams/show.html.erb
@@ -50,9 +50,9 @@
 
 <div data-controller="schedule-table" class="max-w-[1120px] mx-auto">
   <div class="flex overflow-x-auto overflow-y-hidden gap-2 p-0">
-    <div class="relative flex sm:block justify-between flex-grow shrink-0 basis-auto m-1 before:absolute before:left-0 before:right-0 before:bottom-0 before:border-b-[1px]">
+    <div class="relative flex sm:block justify-center flex-grow shrink-0 basis-auto m-1 before:absolute before:left-0 before:right-0 before:bottom-0 before:border-b-[1px]">
       <% @schedule_table.days.each do |day| %>
-        <button data-action="click->schedule-table#switch" value="<%= day %>" class="tab-button bg-transparent appearance-none font-bold font-base text-[rgb(112,109,101)] h-10 solid border-0 border-b-[3px] px-2 sm:px-6 box-border border-b-transparent hover:bg-[rgb(248,247,246)] hover:text-[rgb(35,34,30)]">
+        <button data-action="click->schedule-table#switch" value="<%= day %>" class="tab-button bg-transparent appearance-none font-bold font-base text-[rgb(112,109,101)] h-10 solid border-0 border-b-[3px] px-4 sm:px-6 box-border border-b-transparent hover:bg-[rgb(248,247,246)] hover:text-[rgb(35,34,30)]">
           <%= day %>
         </button>
       <% end %>