increase code editor size for events, schema, and variants

BeaconCMS · Sep 13, 2023 · 37679ae · 37679ae
1 parent cad9b47
commit 37679ae
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 20 deletions.
diff --git a/lib/beacon/live_admin/live/page_editor_live/event_handlers.ex b/lib/beacon/live_admin/live/page_editor_live/event_handlers.ex
@@ -200,14 +200,16 @@ defmodule Beacon.LiveAdmin.PageEditorLive.EventHandlers do
             <.button type="button" phx-click="delete" class="w-1/12 uppercase">Delete</.button>
           </.form>
 
-          <div class="w-full mt-10 space-y-8">
-            <div class="py-6 rounded-[1.25rem] bg-[#0D1829] [&_.monaco-editor-background]:!bg-[#0D1829] [&_.margin]:!bg-[#0D1829]">
-              <LiveMonacoEditor.code_editor
-                path="event_handler_code"
-                class="h-full col-span-full lg:col-span-2"
-                value={@selected.code}
-                opts={Map.merge(LiveMonacoEditor.default_opts(), %{"language" => "elixir"})}
-              />
+          <div class="lg:h-[calc(100vh_-_144px)] mx-auto mt-10 lg:mx-0 lg:max-w-none">
+            <div class="h-full col-span-full lg:col-span-2">
+              <div class="py-6 w-full h-full rounded-[1.25rem] lg:rounded-t-[1.25rem] lg:rounded-b-none bg-[#0D1829] [&_.monaco-editor-background]:!bg-[#0D1829] [&_.margin]:!bg-[#0D1829]">
+                <LiveMonacoEditor.code_editor
+                  path="event_handler_code"
+                  class="h-full col-span-full lg:col-span-2"
+                  value={@selected.code}
+                  opts={Map.merge(LiveMonacoEditor.default_opts(), %{"language" => "elixir"})}
+                />
+              </div>
             </div>
           </div>
         </div>

diff --git a/lib/beacon/live_admin/live/page_editor_live/schema.ex b/lib/beacon/live_admin/live/page_editor_live/schema.ex
@@ -57,12 +57,14 @@ defmodule Beacon.LiveAdmin.PageEditorLive.Schema do
         </:actions>
       </.header>
 
-      <div class="w-full mt-10 space-y-8">
-        <div class="py-6 rounded-[1.25rem] bg-[#0D1829] [&_.monaco-editor-background]:!bg-[#0D1829] [&_.margin]:!bg-[#0D1829]">
-          <LiveMonacoEditor.code_editor path="raw_schema" class="h-full col-span-full lg:col-span-2" value={@raw_schema} opts={Map.merge(LiveMonacoEditor.default_opts(), %{"language" => "json"})} />
+      <div class="lg:h-[calc(100vh_-_144px)] mx-auto mt-10 lg:mx-0 lg:max-w-none">
+        <div class="h-full col-span-full lg:col-span-2">
+          <div class="py-6 w-full h-full rounded-[1.25rem] lg:rounded-t-[1.25rem] lg:rounded-b-none bg-[#0D1829] [&_.monaco-editor-background]:!bg-[#0D1829] [&_.margin]:!bg-[#0D1829]">
+            <LiveMonacoEditor.code_editor path="raw_schema" class="h-full col-span-full lg:col-span-2" value={@raw_schema} opts={Map.merge(LiveMonacoEditor.default_opts(), %{"language" => "json"})} />
+          </div>
         </div>
+        <.error :for={msg <- Enum.map(@form[:raw_schema].errors, &translate_error/1)}><%= msg %></.error>
       </div>
-      <.error :for={msg <- Enum.map(@form[:raw_schema].errors, &translate_error/1)}><%= msg %></.error>
     </div>
     """
   end

diff --git a/lib/beacon/live_admin/live/page_editor_live/variants.ex b/lib/beacon/live_admin/live/page_editor_live/variants.ex
@@ -204,14 +204,17 @@ defmodule Beacon.LiveAdmin.PageEditorLive.Variants do
             <.button type="button" phx-click="delete" class="w-1/12 uppercase">Delete</.button>
           </.form>
           <%= template_error(@form[:template]) %>
-          <div class="w-full mt-10 space-y-8">
-            <div class="py-6 rounded-[1.25rem] bg-[#0D1829] [&_.monaco-editor-background]:!bg-[#0D1829] [&_.margin]:!bg-[#0D1829]">
-              <LiveMonacoEditor.code_editor
-                path="variant"
-                class="h-full col-span-full lg:col-span-2"
-                value={@selected.template}
-                opts={Map.merge(LiveMonacoEditor.default_opts(), %{"language" => @language})}
-              />
+
+          <div class="lg:h-[calc(100vh_-_144px)] mx-auto mt-10 lg:mx-0 lg:max-w-none">
+            <div class="h-full col-span-full lg:col-span-2">
+              <div class="py-6 w-full h-full rounded-[1.25rem] lg:rounded-t-[1.25rem] lg:rounded-b-none bg-[#0D1829] [&_.monaco-editor-background]:!bg-[#0D1829] [&_.margin]:!bg-[#0D1829]">
+                <LiveMonacoEditor.code_editor
+                  path="variant"
+                  class="h-full col-span-full lg:col-span-2"
+                  value={@selected.template}
+                  opts={Map.merge(LiveMonacoEditor.default_opts(), %{"language" => @language})}
+                />
+              </div>
             </div>
           </div>
         </div>