fix footer style

fastrepl · Sep 24, 2024 · 2670f46 · 2670f46
1 parent f61c2ae
commit 2670f46
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 2 deletions.
diff --git a/js/packages/web/src/components/canary-content.stories.ts b/js/packages/web/src/components/canary-content.stories.ts
@@ -13,9 +13,11 @@ import "./canary-search-results";
 
 import "./canary-ask";
 import "./canary-ask-results";
+import "./canary-footer";
 
 enum Kind {
   Search,
+  SearchWithFooter,
   SearchCustomSize,
   SearchWithGlobFilter,
   SearchWithAsk,
@@ -71,6 +73,7 @@ export default {
         </canary-content>
       `;
     }
+
     if (kind === Kind.SearchWithAsk) {
       return html`
         <canary-content>
@@ -85,6 +88,18 @@ export default {
       `;
     }
 
+    if (kind === Kind.SearchWithFooter) {
+      return html`
+        <canary-content>
+          <canary-input slot="input"></canary-input>
+          <canary-search slot="mode">
+            <canary-search-results slot="body"></canary-search-results>
+          </canary-search>
+          <canary-footer slot="footer"></canary-footer>
+        </canary-content>
+      `;
+    }
+
     throw new Error();
   },
 } satisfies Meta<{ kind: Kind }>;
@@ -94,6 +109,11 @@ export const Search: StoryObj = {
   play: type("20hi"),
 };
 
+export const SearchWithFooter: StoryObj = {
+  args: { kind: Kind.SearchWithFooter },
+  play: type("20hi"),
+};
+
 export const SearchWithGlobFilter: StoryObj = {
   args: { kind: Kind.SearchWithGlobFilter },
   play: type("20hi"),

diff --git a/js/packages/web/src/components/canary-content.ts b/js/packages/web/src/components/canary-content.ts
@@ -29,7 +29,9 @@ export class CanaryContent extends LitElement {
             hide: !this._query || this._footers.length === 0,
           })}
         >
-          <slot name="footer"></slot>
+          <div class="footer">
+            <slot name="footer"></slot>
+          </div>
         </div>
       </div>
     `;
@@ -63,7 +65,8 @@ export class CanaryContent extends LitElement {
     `,
     css`
       .footer {
-        padding: 6px 0 2px 12px;
+        padding-top: 2px;
+        padding-right: 6px;
       }
 
       .hide {