Rework snippet css with 2/1 aspect ratio for Twitter

Author: rossta

app/javascript/css/components/snippet.css

@@ -1,7 +1,7 @@
 .snippet {
   filter: drop-shadow(0 0 0.75rem var(--joy-color-50));
   width: fit-content;
-  max-width: var(--grid-max-width);
+  max-width: var(--grid-max-width) - (2 * var(--grid-gutter));
 
   & .code-editor {
     padding-top: var(--space-xs);
@@ -15,7 +15,18 @@
   background-color: var(--joy-color-200);
   padding: var(--space-l);
   width: fit-content;
+  aspect-ratio: 2 / 1;
   border-radius: 0.5rem;
+  max-width: var(--grid-max-width);
+  overflow-x: clip;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  & .code-wrapper {
+    margin: 0 auto;
+  }
 }
 
 /*

app/views/share/snippets/form.rb

@@ -15,36 +15,34 @@ def initialize(snippet)
 
   def view_template
     turbo_stream.update "flash", partial: "application/flash"
-    div(class: "grid-content") do
+    div(class: "section-content") do
       form_with(
         model: [:share, snippet],
-        class: "grid-content",
+        class: "section-content",
         data: {
           controller: "snippet-preview",
           action: "snippet-editor:edit-finish->snippet-preview#preview"
         }
       ) do |form|
         errors
 
-        div(class: "grid-cols-12") do
-          div(class: "snippet-background") do
-            render CodeBlock::Container.new(language: language, class: "snippet") do
-              render CodeBlock::Header.new do
-                label(class: "sr-only", for: "snippet[filename]") { "Filename" }
-                input(type: "text", name: "snippet[filename]", value: filename)
-              end
+        div(class: "snippet-background") do
+          render CodeBlock::Container.new(language: language, class: "snippet") do
+            render CodeBlock::Header.new do
+              label(class: "sr-only", for: "snippet[filename]") { "Filename" }
+              input(type: "text", name: "snippet[filename]", value: filename)
+            end
 
-              turbo_frame_tag dom_id(snippet, :code_block) do
-                render CodeBlock::Body.new(data: {controller: "snippet-editor"}) do
-                  div(class: "grid-stack") do
-                    render CodeBlock::Code.new(source, language: language, data: {snippet_editor_target: "source"})
-                    label(class: "sr-only", for: "snippet[source]") { "Source" }
-                    div(class: "code-editor autogrow-wrapper") do
-                      textarea(
-                        name: "snippet[source]",
-                        data: {snippet_editor_target: "textarea"}
-                      ) { source }
-                    end
+            turbo_frame_tag dom_id(snippet, :code_block) do
+              render CodeBlock::Body.new(data: {controller: "snippet-editor"}) do
+                div(class: "grid-stack") do
+                  render CodeBlock::Code.new(source, language: language, data: {snippet_editor_target: "source"})
+                  label(class: "sr-only", for: "snippet[source]") { "Source" }
+                  div(class: "code-editor autogrow-wrapper") do
+                    textarea(
+                      name: "snippet[source]",
+                      data: {snippet_editor_target: "textarea"}
+                    ) { source }
                   end
                 end
               end
@@ -74,12 +72,15 @@ def view_template
       end
 
       if @snippet.persisted?
-        flex_block do
-          button_to "Destroy this snippet",
-            share_snippet_path(@snippet), method: :delete,
-            data: {confirm: "Are you sure?"},
-            class: "button warn",
-            form: {style: "margin-left: auto"} # move to the right
+        br
+        div do
+          flex_block do
+            button_to "Destroy this snippet",
+              share_snippet_path(@snippet), method: :delete,
+              data: {confirm: "Are you sure?"},
+              class: "button warn"
+            # form: {style: "margin-left: auto"} # move to the right
+          end
         end
       end
     end