better option display

app/views/merged/cards/index.haml

@@ -12,7 +12,7 @@
 
 - @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}"}
-    .basis-96
+    .basis-80
       .p-4
         %h3.mt-4.text-lg.font-bold Card #{index + 1}:#{card.header}
         .flex.flex-wrap
@@ -21,17 +21,16 @@
           = form_tag( merged.card_path(card.id) , {method: :delete  } ) do
             =submit_button( "Delete" , true)
       .p-4
-        %h3.mt-4.text-lg.font-bold.image_button Image
         = yellow_button("Change Image" , merged.images_path(card_id: card.id) )
-        = red_button("Remove image", merged.card_set_image_path( card.id  , image: "") )
         .basis-full.mt-3
           Updated at:
           = distance_of_time_in_words_to_now(card.updated_at)
         .basis-full.mb-3
           Updated by:
           = card.updated_by
+        = red_button("Remove image", merged.card_set_image_path( card.id  , image: "") )
 
-    .basis-96
+    .basis-80
       = link_to(merged.images_path(card_id: card.id)) do
         -if card.image
           %h3.mt-4.text-lg.font-bold Image #{card.image.name}
@@ -58,7 +57,8 @@
       .mt-4.text-lg.font-bold Options
       = form_tag( merged.card_path(card.id) , {method: :patch , class: "mx-auto mt-8 mb-0 max-w space-y-4" }) do
         - card.option_definitions.each do |option|
-          =render "merged/sections/option_form_#{option.type}" , section: card , option: option
+          .grid.grid-cols-3
+            =render "merged/sections/option_form_#{option.type}" , section: card , option: option
         -if card.option_definitions.empty?
           %p No options
         -else

app/views/merged/sections/_option_form_date.haml

@@ -1,4 +1,4 @@
 %label.block
   .mt-4.text-lg.font-bold
     = option.name.camelcase
-  = select_date section.option(option.name) , :prefix => "option[#{option.name}]"
+.col-span-2= select_date section.option(option.name) , :prefix => "option[#{option.name}]"

app/views/merged/sections/_option_form_select.haml

@@ -1,4 +1,4 @@
 %label.block
   .mt-4.text-lg.font-bold
     = option.name.camelcase
-  = select_tag( "option[#{option.name}]" , options_for_select(option.values, section.option(option.name)), class: "w-full rounded-lg border-gray-200 p-4 pr-12 text-sm shadow-sm")
+.col-span-2= select_tag( "option[#{option.name}]" , options_for_select(option.values, section.option(option.name)), class: "w-full rounded-lg border-gray-200 p-4 pr-12 text-sm shadow-sm")

app/views/merged/sections/_option_form_text.haml

@@ -1,4 +1,4 @@
 %label.block
   .mt-4.text-lg.font-bold
     = option.name.camelcase
-  = text_field_tag( "option[#{option.name}]" , section.option(option.name), class: "w-full rounded-lg border-gray-200 p-4 pr-12 text-sm shadow-sm")
+.col-span-2= text_field_tag( "option[#{option.name}]" , section.option(option.name), class: "w-full rounded-lg border-gray-200 p-4 pr-12 text-sm shadow-sm")

app/views/merged/sections/index.haml

@@ -72,8 +72,9 @@
       %h3.mt-4.text-lg.font-bold Options
       .grid.grid-cols-2.gap-3.mx-10
         - section.options.each do|name , value|
-          .font-bold.mt-1= name.camelcase
-          .font-xl= value
+          -unless value.blank?
+            .font-bold.mt-1= name.camelcase
+            .font-xl= value
 .grid.grid-cols-2.gap-2.m-8
   .relative.block
     %p