toggle fix for spaces (#17343)

app/assets/stylesheets/components/toggles.scss

@@ -8,6 +8,7 @@
   border-radius: var(--size);
   -webkit-appearance: none;
   appearance: none;
+  flex-shrink: 0;
   cursor: pointer;
   position: relative;
   background: var(--toggle-rail-bg);

app/assets/stylesheets/config/_generator.scss

@@ -39,6 +39,13 @@
     (),
     false
   ),
+  (
+    'box',
+    'box-sizing',
+    ('content': content-box, 'border': border-box),
+    (),
+    false
+  ),
   (
     'cursor',
     'cursor',

app/assets/stylesheets/config/_import.scss

@@ -55,6 +55,7 @@ $breakpoints: (
 ////////////////////////////////////////////////////////////////////////////////////
 
 $spacing-units: (
+  '05': var(--su-05),
   '1': var(--su-1),
   '2': var(--su-2),
   '3': var(--su-3),
@@ -70,6 +71,7 @@ $spacing-units: (
 ////////////////////////////////////////////////////////////////////////////////////
 
 $negative-spacing-units: (
+  '05': calc(var(--su-05) * -1),
   '1': calc(var(--su-1) * -1),
   '2': calc(var(--su-2) * -1),
   '3': calc(var(--su-3) * -1),

app/assets/stylesheets/config/_variables.scss

@@ -18,6 +18,7 @@
   //  • $(negative-)spacing-units variables are used for
   //    generate-classes() function.
 
+  --su-05: 0.125rem; // 2px
   --su-1: 0.25rem; // 4px
   --su-2: 0.5rem; // 8px
   --su-3: 0.75rem; // 12px

app/views/admin/spaces/index.html.erb

@@ -24,17 +24,16 @@
       </div>
     </div>
 
-    <div class="flex justify-between gap-8 items-start">
-      <label for="space_limit_post_creation_to_admins">
+    <label for="space_limit_post_creation_to_admins" class="flex justify-between gap-8 items-start">
+      <div>
         <p class="fw-medium">Make this space comment-only for members</p>
         <p class="fs-s color-secondary">Only admins can publish posts. Other members can only react to and comment on posts. Only admins will be able to post on behalf of organizations.</p>
-      </label>
+      </div>
 
-      <label class="c-toggle">
-        <%= form.check_box :limit_post_creation_to_admins %>
-        <span class="c-toggle__control"></span>
-      </label>
-    </div>
+      <span>
+        <%= form.check_box :limit_post_creation_to_admins, class: "c-toggle box-content p-05" %>
+      </span>
+    </label>
 
     <div class="fs-s color-secondary">
       <p><%= crayons_icon_tag("info") %> When you turn on comment-only for this space, it also means that for the time being…</p>