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
pull/580/head
Claude 2 months ago
parent 9fa4e7d228
commit cdf6227440
No known key found for this signature in database

@ -2,7 +2,7 @@
<div <div
ref="dragContainer" ref="dragContainer"
style="max-width: 1600px" 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'" :class="isMobile ? 'pl-4' : 'md:pl-4'"
@dragover="onDragover" @dragover="onDragover"
@drop="isDragFile = false" @drop="isDragFile = false"
@ -54,7 +54,7 @@
<div <div
v-if="$slots.buttons || withTitle" v-if="$slots.buttons || withTitle"
id="title_container" 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 }" :class="{ sticky: withStickySubmitters || isBreakpointLg }"
:style="{ backgroundColor: backgroundColor || '' }" :style="{ backgroundColor: backgroundColor || '' }"
> >
@ -284,7 +284,7 @@
@change="save" @change="save"
/> />
<div <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 || '' }" :style="{ backgroundColor: backgroundColor || '' }"
> >
<Upload <Upload
@ -444,7 +444,7 @@
> >
<div <div
v-if="showDrawField || drawField || drawCustomField" 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 || '' }" :style="{ backgroundColor: backgroundColor || '' }"
> >
<div class="bg-base-200 rounded-lg p-5 text-center space-y-4 draw-field-container"> <div class="bg-base-200 rounded-lg p-5 text-center space-y-4 draw-field-container">

@ -18,7 +18,7 @@
<% end %> <% end %>
<%= stylesheet_pack_tag 'application', media: 'all' %> <%= stylesheet_pack_tag 'application', media: 'all' %>
</head> </head>
<body> <body class="bg-base-100">
<% if params[:modal].present? %> <% if params[:modal].present? %>
<% url_params = Rails.application.routes.recognize_path(params[:modal], method: :get) %> <% url_params = Rails.application.routes.recognize_path(params[:modal], method: :get) %>
<% if url_params[:action] == 'new' %> <% if url_params[:action] == 'new' %>

@ -12,7 +12,7 @@
<% end %> <% end %>
<%= stylesheet_pack_tag 'form', media: 'all' %> <%= stylesheet_pack_tag 'form', media: 'all' %>
</head> </head>
<body> <body class="bg-base-100">
<%= yield %> <%= yield %>
</body> </body>
</html> </html>

@ -12,7 +12,7 @@
<% end %> <% end %>
<%= stylesheet_pack_tag 'application', media: 'all' %> <%= stylesheet_pack_tag 'application', media: 'all' %>
</head> </head>
<body> <body class="bg-base-100">
<% if flash.present? %><%= render 'shared/flash' %><% end %> <% if flash.present? %><%= render 'shared/flash' %><% end %>
<%= yield %> <%= yield %>
<turbo-frame id="modal"></turbo-frame> <turbo-frame id="modal"></turbo-frame>

Loading…
Cancel
Save