From cc4aa25e461bb2cb832cc16a10a6005472a55620 Mon Sep 17 00:00:00 2001
From: Torsten <torsten@rubydesign.fi>
Date: Mon, 9 Jan 2023 14:44:00 +0200
Subject: [PATCH] back to merged layout (more space)

---
 app/assets/stylesheets/merged/merged.css      | 152 +++++++++++++-----
 .../merged/application_controller.rb          |   2 +-
 app/controllers/merged/merged_controller.rb   |   2 +-
 app/views/layouts/merged/_header.haml         |  26 +++
 app/views/layouts/merged/_messages.haml       |  28 ++++
 app/views/layouts/merged/application.haml     |  18 +++
 app/views/merged/cards/index.haml             |  21 ++-
 app/views/merged/changes/index.haml           |   4 +-
 app/views/merged/images/index.haml            |   3 +-
 app/views/merged/images/show.haml             |   4 +-
 app/views/merged/pages/index.haml             |   5 +-
 app/views/merged/pages/show.haml              |   3 +-
 app/views/merged/sections/index.haml          |   8 +-
 app/views/merged/sections/new.haml            |   2 +-
 .../merged/sections/select_card_template.haml |   2 +-
 .../merged/sections/select_template.haml      |   6 +-
 app/views/merged/sections/show.haml           |  15 +-
 app/views/merged/styles/index.haml            |   4 +-
 18 files changed, 215 insertions(+), 90 deletions(-)
 create mode 100644 app/views/layouts/merged/_header.haml
 create mode 100644 app/views/layouts/merged/_messages.haml
 create mode 100644 app/views/layouts/merged/application.haml

diff --git a/app/assets/stylesheets/merged/merged.css b/app/assets/stylesheets/merged/merged.css
index 508ab76..1b9b7d5 100644
--- a/app/assets/stylesheets/merged/merged.css
+++ b/app/assets/stylesheets/merged/merged.css
@@ -1390,6 +1390,16 @@ select {
   margin-bottom: 0.75rem;
 }
 
+.mx-20 {
+  margin-left: 5rem;
+  margin-right: 5rem;
+}
+
+.my-10 {
+  margin-top: 2.5rem;
+  margin-bottom: 2.5rem;
+}
+
 .mx-2 {
   margin-left: 0.5rem;
   margin-right: 0.5rem;
@@ -1400,11 +1410,6 @@ select {
   margin-right: auto;
 }
 
-.mx-20 {
-  margin-left: 5rem;
-  margin-right: 5rem;
-}
-
 .my-4 {
   margin-top: 1rem;
   margin-bottom: 1rem;
@@ -1455,6 +1460,11 @@ select {
   margin-right: 1.5rem;
 }
 
+.my-6 {
+  margin-top: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
 .mr-3 {
   margin-right: 0.75rem;
 }
@@ -1463,6 +1473,14 @@ select {
   margin-left: 5rem;
 }
 
+.mt-2 {
+  margin-top: 0.5rem;
+}
+
+.mt-1 {
+  margin-top: 0.25rem;
+}
+
 .mt-4 {
   margin-top: 1rem;
 }
@@ -1479,10 +1497,6 @@ select {
   margin-bottom: 1rem;
 }
 
-.mt-2 {
-  margin-top: 0.5rem;
-}
-
 .mt-8 {
   margin-top: 2rem;
 }
@@ -1511,10 +1525,6 @@ select {
   margin-bottom: 2rem;
 }
 
-.mt-1 {
-  margin-top: 0.25rem;
-}
-
 .mr-2 {
   margin-right: 0.5rem;
 }
@@ -1587,6 +1597,10 @@ select {
   height: 2.5rem;
 }
 
+.h-4 {
+  height: 1rem;
+}
+
 .h-6 {
   height: 1.5rem;
 }
@@ -1639,6 +1653,10 @@ select {
   width: 100%;
 }
 
+.w-4 {
+  width: 1rem;
+}
+
 .w-6 {
   width: 1.5rem;
 }
@@ -1807,6 +1825,10 @@ select {
   flex-wrap: wrap;
 }
 
+.items-start {
+  align-items: flex-start;
+}
+
 .items-end {
   align-items: flex-end;
 }
@@ -1839,10 +1861,6 @@ select {
   gap: 1.5rem;
 }
 
-.gap-10 {
-  gap: 2.5rem;
-}
-
 .gap-2 {
   gap: 0.5rem;
 }
@@ -1851,6 +1869,10 @@ select {
   gap: 1rem;
 }
 
+.gap-10 {
+  gap: 2.5rem;
+}
+
 .gap-3 {
   gap: 0.75rem;
 }
@@ -1859,6 +1881,10 @@ select {
   gap: 3rem;
 }
 
+.gap-8 {
+  gap: 2rem;
+}
+
 .space-y-4 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
@@ -1900,6 +1926,10 @@ select {
   border-radius: 0.25rem;
 }
 
+.rounded-xl {
+  border-radius: 0.75rem;
+}
+
 .rounded-md {
   border-radius: 0.375rem;
 }
@@ -1924,6 +1954,10 @@ select {
   border-width: 0px;
 }
 
+.border-l-4 {
+  border-left-width: 4px;
+}
+
 .border-b {
   border-bottom-width: 1px;
 }
@@ -1941,6 +1975,16 @@ select {
   border-color: rgb(156 163 175 / var(--tw-border-opacity));
 }
 
+.border-red-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(239 68 68 / var(--tw-border-opacity));
+}
+
+.border-gray-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(243 244 246 / var(--tw-border-opacity));
+}
+
 .border-gray-200 {
   --tw-border-opacity: 1;
   border-color: rgb(229 231 235 / var(--tw-border-opacity));
@@ -1951,11 +1995,6 @@ select {
   border-color: rgb(0 0 0 / var(--tw-border-opacity));
 }
 
-.border-gray-100 {
-  --tw-border-opacity: 1;
-  border-color: rgb(243 244 246 / var(--tw-border-opacity));
-}
-
 .border-gray-300 {
   --tw-border-opacity: 1;
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
@@ -2100,16 +2139,16 @@ select {
   background-color: rgb(154 52 18 / 0.25);
 }
 
-.bg-cyan-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(236 254 255 / var(--tw-bg-opacity));
-}
-
 .bg-red-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(254 242 242 / var(--tw-bg-opacity));
 }
 
+.bg-cyan-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(236 254 255 / var(--tw-bg-opacity));
+}
+
 .bg-transparent {
   background-color: transparent;
 }
@@ -2172,14 +2211,14 @@ select {
      object-fit: cover;
 }
 
-.p-2 {
-  padding: 0.5rem;
-}
-
 .p-4 {
   padding: 1rem;
 }
 
+.p-2 {
+  padding: 0.5rem;
+}
+
 .p-3 {
   padding: 0.75rem;
 }
@@ -2214,6 +2253,11 @@ select {
   padding-bottom: 0.75rem;
 }
 
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
 .px-20 {
   padding-left: 5rem;
   padding-right: 5rem;
@@ -2234,11 +2278,6 @@ select {
   padding-bottom: 0.25rem;
 }
 
-.py-2 {
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-}
-
 .py-8 {
   padding-top: 2rem;
   padding-bottom: 2rem;
@@ -2289,6 +2328,11 @@ select {
   padding-bottom: 1rem;
 }
 
+.py-6 {
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+}
+
 .pr-12 {
   padding-right: 3rem;
 }
@@ -2334,16 +2378,16 @@ select {
   line-height: 1.75rem;
 }
 
-.text-xl {
-  font-size: 1.25rem;
-  line-height: 1.75rem;
-}
-
 .text-sm {
   font-size: 0.875rem;
   line-height: 1.25rem;
 }
 
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
 .text-2xl {
   font-size: 1.5rem;
   line-height: 2rem;
@@ -2454,6 +2498,21 @@ select {
   color: rgb(107 114 128 / var(--tw-text-opacity));
 }
 
+.text-blue-700 {
+  --tw-text-opacity: 1;
+  color: rgb(29 78 216 / var(--tw-text-opacity));
+}
+
+.text-red-700 {
+  --tw-text-opacity: 1;
+  color: rgb(185 28 28 / var(--tw-text-opacity));
+}
+
+.text-green-600 {
+  --tw-text-opacity: 1;
+  color: rgb(22 163 74 / var(--tw-text-opacity));
+}
+
 .text-gray-900 {
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity));
@@ -2478,6 +2537,12 @@ select {
   text-decoration-line: underline;
 }
 
+.shadow-xl {
+  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .shadow-sm {
   --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
@@ -2530,6 +2595,11 @@ select {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.hover\:bg-red-50:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 242 242 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-sky-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(224 242 254 / var(--tw-bg-opacity));
diff --git a/app/controllers/merged/application_controller.rb b/app/controllers/merged/application_controller.rb
index 3169ce6..acd5cac 100644
--- a/app/controllers/merged/application_controller.rb
+++ b/app/controllers/merged/application_controller.rb
@@ -1,4 +1,4 @@
 module Merged
-  class ApplicationController < ApplicationController
+  class ApplicationController < ActionController::Base
   end
 end
diff --git a/app/controllers/merged/merged_controller.rb b/app/controllers/merged/merged_controller.rb
index 800793b..b82dbd2 100644
--- a/app/controllers/merged/merged_controller.rb
+++ b/app/controllers/merged/merged_controller.rb
@@ -1,5 +1,5 @@
 module Merged
-  class MergedController < ::ApplicationController
+  class MergedController < ApplicationController
     before_action :authenticate_member!
   end
 end
diff --git a/app/views/layouts/merged/_header.haml b/app/views/layouts/merged/_header.haml
new file mode 100644
index 0000000..e60f58b
--- /dev/null
+++ b/app/views/layouts/merged/_header.haml
@@ -0,0 +1,26 @@
+.mx-20.my-6.flex.h-16.items-center.gap-16
+  %a{:href => "/merged/pages"}
+    %span.sr-only Home
+    =image_tag("merged/merged_logo" , class: "h-10")
+
+  %ul.flex.items-center.gap-6.text-lg
+    %li
+      %a.text-gray-500.transition{:class => "hover:text-gray-500/75", :href => merged.pages_path}
+        Pages
+    %li
+      %a.text-gray-500.transition{:class => "hover:text-gray-500/75", :href => merged.images_path}
+        Images
+    %li
+      %a.text-gray-500.transition{:class => "hover:text-gray-500/75", :href => merged.styles_index_path}
+        Styles
+    %li
+      %a.text-gray-500.transition{:class => "hover:text-gray-500/75", :href => merged.changes_index_path}
+        Changes
+
+  %button.my-3{class: last_change_class}= last_change_text
+
+  = form_tag( main_app.destroy_member_session_path , {method: :delete  } ) do
+    %button.flex.w-full.items-center.gap-2.rounded-lg.px-4.py-2.text-sm.text-blue-700.hover:bg-red-50{:role => "menuitem", :type => "submit"}
+      %svg.h-4.w-4{:fill => "none", :stroke => "currentColor", "stroke-width" => "2", :viewbox => "0 0 24 24", :xmlns => "http://www.w3.org/2000/svg"}
+        %path{:d => "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16", "stroke-linecap" => "round", "stroke-linejoin" => "round"}
+      Sign out
diff --git a/app/views/layouts/merged/_messages.haml b/app/views/layouts/merged/_messages.haml
new file mode 100644
index 0000000..e7b0290
--- /dev/null
+++ b/app/views/layouts/merged/_messages.haml
@@ -0,0 +1,28 @@
+-if flash.alert
+  #flash
+    .m-20.rounded.border-l-4.border-red-500.bg-red-50.p-4{:role => "alert"}
+      %strong.block.font-medium.text-red-700 Oops
+      %p.mt-2.text-sm.text-red-700
+        =flash.alert
+
+-if flash.notice
+  #flash
+    .m-20.rounded-xl.border.border-gray-100.p-4.shadow-xl{:role => "alert"}
+      .flex.items-start.gap-4
+        %span.text-green-600
+          %svg.h-6.w-6{:fill => "none", :stroke => "currentColor", "stroke-width" => "1.5", :viewbox => "0 0 24 24", :xmlns => "http://www.w3.org/2000/svg"}
+            %path{:d => "M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z", "stroke-linecap" => "round", "stroke-linejoin" => "round"}
+        .flex-1
+          %strong.block.font-medium.text-gray-900 Ok
+          %p.mt-1.text-sm.text-gray-700
+            = flash.notice
+:javascript
+  function hideNotice() {
+    const notification = document.querySelector('#flash')
+    if (notification) {
+      setInterval(function() {
+        notification.classList.add('hidden');
+      }, 5000);
+    }
+  }
+  hideNotice();
diff --git a/app/views/layouts/merged/application.haml b/app/views/layouts/merged/application.haml
new file mode 100644
index 0000000..91d55fc
--- /dev/null
+++ b/app/views/layouts/merged/application.haml
@@ -0,0 +1,18 @@
+!!!
+%html
+  %head
+    %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
+    %title Hubfeenix
+    %meta{:content => "width=device-width,initial-scale=1", :name => "viewport"}/
+    = csrf_meta_tags
+    = csp_meta_tag
+    = stylesheet_link_tag "merged/merged"
+
+    = javascript_importmap_tags
+    - if false
+      %script{:src => "https://cdn.tailwindcss.com"}
+
+  %body
+    = render "layouts/merged/header"
+    = render "layouts/merged/messages"
+    = yield
diff --git a/app/views/merged/cards/index.haml b/app/views/merged/cards/index.haml
index 332730a..2637311 100644
--- a/app/views/merged/cards/index.haml
+++ b/app/views/merged/cards/index.haml
@@ -1,26 +1,23 @@
-- content_for( :merged_menu ) do
+.mx-20.flex.h-16.items-center.gap-16
   = render "merged/sections/sections_pagination" , section: @section
   .text-xl.text-gray-900
     Cards for Section #{@section.index} -
     = link_to @section.header , merged.section_path( @section.id) , class: "underline"
   = link_to( "New Card" , merged.new_section_card_path(@section.id) , class: "p-2 border border-gray-200 bg-cyan-100 font-bold rounded-lg hover:bg-sky-100")
 
-= render "layouts/merged_header"
-
 - template = find_template(@section)
 = render( template , section: @section)
 
 - @section.cards.each_with_index do |card , index|
-  .flex.gap-10.px-20.py-10{class: (card.index%2)==1 ? 'bg-cyan-50' : 'bg-red-50' , id: "card_#{card.id}"}
+  .flex.gap-8.px-20.py-6.mb-2{class: (card.index%2)==1 ? 'bg-cyan-50' : 'bg-red-50' , id: "card_#{card.id}"}
     .basis-80
-      .p-4
-        %h3.mt-4.text-lg.font-bold Card #{index + 1}:#{card.header}
-        .flex.flex-wrap
-          = blue_button( "Up" , merged.card_move_path(card.id , dir: :up) )
-          = blue_button( "Down" , merged.card_move_path(card.id , dir: :down) )
-          = form_tag( merged.card_path(card.id) , {method: :delete  } ) do
-            =submit_button( "Delete" , true)
-      .p-4
+      %h3.mt-4.text-lg.font-bold Card #{index + 1}:#{card.header}
+      .flex.flex-wrap
+        = blue_button( "Up" , merged.card_move_path(card.id , dir: :up) )
+        = blue_button( "Down" , merged.card_move_path(card.id , dir: :down) )
+        = form_tag( merged.card_path(card.id) , {method: :delete  } ) do
+          =submit_button( "Delete" , true)
+      .mt-6
         = yellow_button("Change Image" , merged.images_path(card_id: card.id) )
         .basis-full.mt-3
           Updated at:
diff --git a/app/views/merged/changes/index.haml b/app/views/merged/changes/index.haml
index 356a4e9..5615716 100644
--- a/app/views/merged/changes/index.haml
+++ b/app/views/merged/changes/index.haml
@@ -1,12 +1,10 @@
-- content_for( :merged_menu ) do
+.mx-20.flex.h-16.items-center.gap-16
   .text-xl.font-bold.text-gray-900
     Changes
   .text-xl.text-gray-900
     Branch
     = @git.current_branch
 
-= render "layouts/merged_header"
-
 .overflow-hidden.overflow-x-auto.rounded-lg.border.border-gray-200.m-20
   %table.min-w-full.divide-y.divide-gray-200.text-sm
     %thead.bg-gray-100
diff --git a/app/views/merged/images/index.haml b/app/views/merged/images/index.haml
index 2aeeef8..0850e4d 100644
--- a/app/views/merged/images/index.haml
+++ b/app/views/merged/images/index.haml
@@ -1,8 +1,7 @@
-- content_for( :merged_menu ) do
+.mx-20.flex.h-16.items-center.gap-16
   .text-xl.font-bold.text-gray-900
     = text_for_index
 
-= render "layouts/merged_header"
 - if Rails.env.development?
   = javascript_include_tag "merged/vue.js"
 -else
diff --git a/app/views/merged/images/show.haml b/app/views/merged/images/show.haml
index a479a6b..d0b30ae 100644
--- a/app/views/merged/images/show.haml
+++ b/app/views/merged/images/show.haml
@@ -1,4 +1,4 @@
-- content_for( :merged_menu ) do
+.mx-20.flex.h-16.items-center.gap-16
   .text-xl.font-bold.text-gray-900
     Image: #{@image.name}
 
@@ -10,8 +10,6 @@
 -else
   = javascript_include_tag "merged/vue.min.js"
 
-= render "layouts/merged_header"
-
 .flex.m-20
   .left.flex.gap-2.mt-3
     %p
diff --git a/app/views/merged/pages/index.haml b/app/views/merged/pages/index.haml
index da55d92..fe94ad5 100644
--- a/app/views/merged/pages/index.haml
+++ b/app/views/merged/pages/index.haml
@@ -1,11 +1,10 @@
-- content_for( :merged_menu ) do
+.mx-20.flex.h-16.items-center.gap-16
   .text-xl.font-bold.text-gray-900
     = link_to( "All" , merged.pages_path(type: '') , class: "p-2 px-4 border border-gray-200 font-bold rounded-lg hover:bg-sky-100 #{params[:type].blank? ? 'bg-blue-200':''}")
   - @page_styles.each do |style|
     = link_to( "Only #{style.type.capitalize}s" , merged.pages_path(type: style.type) , class: "p-2 px-4 border border-gray-200 font-bold rounded-lg hover:bg-sky-100 #{(params[:type] == style.type) ? 'bg-blue-200':''}")
 
-= render "layouts/merged_header"
-.overflow-hidden.overflow-x-auto.rounded-lg.border.border-gray-200.m-20
+.overflow-hidden.overflow-x-auto.rounded-lg.border.border-gray-200.mx-20.my-10
   %table.min-w-full.divide-y.divide-gray-200.text-sm
     %thead.bg-gray-100
       %tr
diff --git a/app/views/merged/pages/show.haml b/app/views/merged/pages/show.haml
index 2298527..1910e44 100644
--- a/app/views/merged/pages/show.haml
+++ b/app/views/merged/pages/show.haml
@@ -1,4 +1,4 @@
-- content_for( :merged_menu ) do
+.mx-20.flex.h-16.items-center.gap-16
   .text-xl.font-bold.text-gray-900
     = @page.type.capitalize
   .text-xl.font-bold.text-gray-900
@@ -7,7 +7,6 @@
     = link_to 'Sections', merged.page_sections_path(@page.id)
 
   .text-xl= distance_of_time_in_words_to_now(@page.updated_at)
-= render "layouts/merged_header"
 
 .flex.gap-4.justify-center.m-20
   .flex.flex-col
diff --git a/app/views/merged/sections/index.haml b/app/views/merged/sections/index.haml
index a85099e..5b5d1ae 100644
--- a/app/views/merged/sections/index.haml
+++ b/app/views/merged/sections/index.haml
@@ -1,4 +1,4 @@
-- content_for( :merged_menu ) do
+.mx-20.flex.h-16.items-center.gap-16.mb-10
   .text-xl.font-bold.text-gray-900
     = @page.type.capitalize
     = link_to @page.name , merged.page_path(@page)
@@ -6,11 +6,9 @@
     =link_to "View live" , "/#{@page.name}" , target: @page.name
   = link_to( "New Section" , merged.new_page_section_path(@page.id) , class: "p-2 border border-gray-200 bg-cyan-100 font-bold rounded-lg hover:bg-sky-100")
 
-= render "layouts/merged_header"
-
 -@page.sections.each do |section |
-  .flex.gap-10.p-4{class: (section.index%2)==1 ? 'bg-cyan-50' : 'bg-red-50' , id: "section_#{section.id}"}
-    .basis-72
+  .flex.gap-10.mt-2{class: (section.index%2)==1 ? 'bg-cyan-50' : 'bg-red-50' , id: "section_#{section.id}"}
+    .basis-72.mx-20
       %h3.mt-4.text-lg.font-bold Section #{section.index} : #{section.header}
       .flex.flex-wrap
         = yellow_button("Edit" , merged.section_path(section.id) )
diff --git a/app/views/merged/sections/new.haml b/app/views/merged/sections/new.haml
index ebbecb9..0222808 100644
--- a/app/views/merged/sections/new.haml
+++ b/app/views/merged/sections/new.haml
@@ -1,4 +1,4 @@
-- content_for( :merged_menu ) do
+.mx-20.flex.h-16.items-center.gap-16
   .text-xl.font-bold.text-gray-900
     Changes
   .text-xl.text-gray-900
diff --git a/app/views/merged/sections/select_card_template.haml b/app/views/merged/sections/select_card_template.haml
index 3c04d4a..d9f17bb 100644
--- a/app/views/merged/sections/select_card_template.haml
+++ b/app/views/merged/sections/select_card_template.haml
@@ -1,4 +1,4 @@
-- content_for( :merged_menu ) do
+.mx-20.flex.h-16.items-center.gap-16
   .text-xl.font-bold.text-gray-900
     Page #{link_to @section.page.name, merged.page_sections_path(@section.page.id), class: "underline"}
   .text-xl.text-gray-900
diff --git a/app/views/merged/sections/select_template.haml b/app/views/merged/sections/select_template.haml
index 0a93b2a..1be19a0 100644
--- a/app/views/merged/sections/select_template.haml
+++ b/app/views/merged/sections/select_template.haml
@@ -1,12 +1,10 @@
-- content_for( :merged_menu ) do
+.mx-20.flex.h-16.items-center.gap-16
   .text-xl.font-bold.text-gray-900
     Page #{link_to @section.page.name, merged.page_sections_path(@section.page.id), class: "underline"}
   .text-xl.text-gray-900
     Select Style for Section #{@section.index} - #{@section.header}
 
-= render "layouts/merged_header"
-
-.grid.grid-cols-4.gap-6.m-8
+.grid.grid-cols-4.gap-6.my-10.mx-20
   - @sections.each do |style|
     .border.border-gray-300.rounded-lg.p-2
       = link_to( merged.section_set_template_path( template: style.template )) do
diff --git a/app/views/merged/sections/show.haml b/app/views/merged/sections/show.haml
index d848569..a48a916 100644
--- a/app/views/merged/sections/show.haml
+++ b/app/views/merged/sections/show.haml
@@ -1,13 +1,11 @@
-- content_for( :merged_menu ) do
+.mx-20.flex.h-16.items-center.gap-16
   = render "sections_pagination" , section: @section
 
-= render "layouts/merged_header"
-
 - template = find_template(@section)
 = render( template , section: @section)
 
-.flex.gap-4.m-8.flex-wrap
-  .basis-96
+.flex.gap-8.my-10.flex-wrap
+  .basis-80.ml-20
     %h3.mt-4.text-lg.font-bold= @section.template_style.header
     = section_preview(@section , class: "w-full object-contain my-4")
     = yellow_button( "Change Style" , merged.section_select_template_path(@section.id))
@@ -19,7 +17,7 @@
       Updated by:
       = @section.updated_by
 
-  .basis-96.image
+  .basis-80.image
     = link_to(merged.images_path(section_id: @section.id)) do
       -if @section.image
         %h3.mt-4.text-lg.font-bold Image #{@section.image.name}
@@ -62,11 +60,12 @@
         = yellow_button( "View and Edit Cards" , merged.section_cards_path(@section.id))
         = green_button( "New Card" , merged.new_section_card_path(@section.id) )
 
-  .basis-80.grow
+  .basis-80.grow.mr-20
     %h3.mt-4.text-lg.font-bold Options
     = section_form( class: "mx-auto mt-8 mb-0 max-w space-y-4") do
       - @section.option_definitions.each do |option|
-        =render "option_form_#{option.type}" , section: @section , option: option
+        .grid.grid-cols-3
+          =render "option_form_#{option.type}" , section: @section , option: option
       -if @section.option_definitions.empty?
         %p No options
       -else
diff --git a/app/views/merged/styles/index.haml b/app/views/merged/styles/index.haml
index 85ea699..34e52e9 100644
--- a/app/views/merged/styles/index.haml
+++ b/app/views/merged/styles/index.haml
@@ -1,4 +1,4 @@
-- content_for( :merged_menu ) do
+.mx-20.flex.h-16.items-center.gap-16
   .text-xl.font-bold
     Page styles
   .text-xl.font-bold
@@ -6,8 +6,6 @@
   .text-xl.font-bold
     =link_to "Card styles" , "#cards_styles"
 
-= render "layouts/merged_header"
-
 .flex.bg-cyan-100
   .px-4.py-8.mx-auto.text-center
     %h1.text-4xl.font-bold