From d1fb072cbc35b4faeeb45ad0919bcefb51456aae Mon Sep 17 00:00:00 2001
From: Gordon Brander <gordonbrander@users.noreply.github.com>
Date: Thu, 31 Oct 2024 09:56:08 -0700
Subject: [PATCH] Add safearea styling to sidebar group

---
 typescript/packages/common-os-ui/index.html          |  4 ++--
 .../common-os-ui/src/components/os-sidebar-group.ts  | 12 +++++++++++-
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/typescript/packages/common-os-ui/index.html b/typescript/packages/common-os-ui/index.html
index 2a171f83f..4c36788c6 100644
--- a/typescript/packages/common-os-ui/index.html
+++ b/typescript/packages/common-os-ui/index.html
@@ -47,11 +47,11 @@
             <os-charm-row icon="cloud" text="Weather"> </os-charm-row>
             <os-charm-row icon="folder" text="CHEM131"> </os-charm-row>
           </os-charm-row-group>
-          <os-sidebar-group>
+          <os-sidebar-group safearea>
             <div slot="label">Notes</div>
             <os-rich-text-editor></os-rich-text-editor>
           </os-sidebar-group>
-          <os-sidebar-group>
+          <os-sidebar-group safearea>
             <div slot="label">Title</div>
             <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
diff --git a/typescript/packages/common-os-ui/src/components/os-sidebar-group.ts b/typescript/packages/common-os-ui/src/components/os-sidebar-group.ts
index 83c18063c..8b12fe60e 100644
--- a/typescript/packages/common-os-ui/src/components/os-sidebar-group.ts
+++ b/typescript/packages/common-os-ui/src/components/os-sidebar-group.ts
@@ -15,13 +15,23 @@ export class OsSidebarGroup extends LitElement {
       .sgroup {
         gap: var(--u);
       }
+
+      .sgroup-heading {
+        padding-left: var(--pad);
+        padding-right: var(--pad);
+      }
+
+      :host([safearea]) .sgroup-content {
+        padding-left: var(--pad);
+        padding-right: var(--pad);
+      }
     `,
   ];
 
   override render() {
     return html`
       <aside class="sgroup vstack">
-        <heading class="sgroup-heading pad-h"
+        <heading class="sgroup-heading"
           ><slot class="label" name="label"></slot
         ></heading>
         <div class="sgroup-content"><slot></slot></div>