fix: ajuste de estilos en plantillas #13587

app/assets/stylesheets/application.scss

@@ -290,16 +290,37 @@ svg {
   }
 }
 
+.custom-control {
+  border: 1px solid magenta;
+  padding:7px 15px 2px;
+}
+
 .custom-control-label {
   font-weight: bold;
 }
 
+.custom-control-label::before {
+  display: none;
+}
+
+.des-description {
+  font-size: small;
+  margin-left: 10px;
+}
+
+
 .designs {
   .design {
     margin-top: 1rem;
   }
 }
 
+.radio-toolbar {
+  opacity: 0;
+  position: absolute;
+  width: 0;
+}
+
 .editor {
   .ProseMirror-menubar {
     min-height: 32px;

app/views/sites/_designs.haml

@@ -1,34 +1,33 @@
 = form_for site, html: { class: form_class(site) } do |f|
   - unless site.persisted?
     .form-group#design_id
-      %h2= t('.design.title')
-      %p.lead= t('.help.design')
       - if invalid? site, :design_id
         = render 'bootstrap/alert' do
           = t('activerecord.errors.models.site.attributes.design_id.layout_incompatible.help',
             layouts: site.incompatible_layouts.to_sentence)
-      .row
+      .row.designs
         - @designs = Design.all.order(priority: :desc)
-        .col-md-3.black-bg.col-sm-12
+        .col-md-3.col-sm-12
           %h5.pb-3 Selector de Plantillas
           - @designs.each do |design|
-            .design.col.d-flex.flex-column
-              .custom-control.custom-radio
+            .design.col.d-flex.flex-column.custom-control
+              .custom
                 = f.radio_button :design_id, design.id,
                   checked: design.id == site.design_id,
                   disabled: design.disabled, 
-                  required: true, class: 'custom-control-input'
-                = f.label "design_id_#{design.id}", design.name,
+                  required: true, class: 'radio-toolbar'
+                = f.label "design_id_#{design.id}", " - #{design.name}",
                   class: 'custom-control-label'
-              .flex-fill
+              .flex-fill.des-description
                 = sanitize_markdown design.description,
                   tags: %w[p a strong em]
                  
-        .col-md-6.black-bg.col-sm-12
+        
+        .col-md-6.col-sm-12
           %h5.text-center.pb-3 Previsualizar Plantilla
           .embed-responsive.embed-responsive-1by1
             %iframe.embed-responsive-item{allowfullscreen: "", src: "https://www.youtube.com/embed/zpOULjyy-n8?rel=0"}
-        .col-md-3.black-bg.col.sm-12
+        .col-md-3.col.sm-12
           %h5.pb-3 Características
           = @designs.first.inspect