Fix white background in template editor and all layouts

- Add explicit bg-base-100 to body element in all layouts (plain, form, application) to ensure dark background is always applied - Add bg-base-100 to template builder root container, title bar, sidebar bottom, and draw field overlay to prevent white gaps in the editor https://claude.ai/code/session_01SMJoL1Hzz3b5qqDhyD63jF
2 months ago · cdf6227440
parent 9fa4e7d228
commit cdf6227440
4 changed files with 7 additions and 7 deletions
--- a/app/javascript/template_builder/builder.vue
+++ b/app/javascript/template_builder/builder.vue
@ -2,7 +2,7 @@
  <div
    ref="dragContainer"
    style="max-width: 1600px"
-    class="mx-auto pl-3 h-full"
+    class="mx-auto pl-3 h-full bg-base-100"
    :class="isMobile ? 'pl-4' : 'md:pl-4'"
    @dragover="onDragover"
    @drop="isDragFile = false"
@ -54,7 +54,7 @@
    <div
      v-if="$slots.buttons || withTitle"
      id="title_container"
-      class="flex justify-between py-1.5 items-center pr-4 top-0 z-10 title-container"
+      class="flex justify-between py-1.5 items-center pr-4 top-0 z-10 bg-base-100 title-container"
      :class="{ sticky: withStickySubmitters || isBreakpointLg }"
      :style="{ backgroundColor: backgroundColor || '' }"
    >
@ -284,7 +284,7 @@
          @change="save"
        />
        <div
-          class="sticky bottom-0 py-2 space-y-2"
+          class="sticky bottom-0 py-2 space-y-2 bg-base-100"
          :style="{ backgroundColor: backgroundColor || '' }"
        >
          <Upload
@ -444,7 +444,7 @@
      >
        <div
          v-if="showDrawField || drawField || drawCustomField"
-          class="sticky inset-0 h-full z-20"
+          class="sticky inset-0 h-full z-20 bg-base-100"
          :style="{ backgroundColor: backgroundColor || '' }"
        >
          <div class="bg-base-200 rounded-lg p-5 text-center space-y-4 draw-field-container">
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@ -18,7 +18,7 @@
    <% end %>
    <%= stylesheet_pack_tag 'application', media: 'all' %>
  </head>
-  <body>
+  <body class="bg-base-100">
    <% if params[:modal].present? %>
      <% url_params = Rails.application.routes.recognize_path(params[:modal], method: :get) %>
      <% if url_params[:action] == 'new' %>
--- a/app/views/layouts/form.html.erb
+++ b/app/views/layouts/form.html.erb
@ -12,7 +12,7 @@
    <% end %>
    <%= stylesheet_pack_tag 'form', media: 'all' %>
  </head>
-  <body>
+  <body class="bg-base-100">
    <%= yield %>
  </body>
 </html>
--- a/app/views/layouts/plain.html.erb
+++ b/app/views/layouts/plain.html.erb
@ -12,7 +12,7 @@
    <% end %>
    <%= stylesheet_pack_tag 'application', media: 'all' %>
  </head>
-  <body>
+  <body class="bg-base-100">
    <% if flash.present? %><%= render 'shared/flash' %><% end %>
    <%= yield %>
    <turbo-frame id="modal"></turbo-frame>