From 82260d70300c40f54eb985c208d653906fd0c3e0 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Tue, 27 Jul 2021 15:06:55 +0200
Subject: [PATCH] #43 - Fix for collapsible sections

---
 assets/media/styles.css                  | 4 ++++
 src/viewpanel/ViewPanel.tsx              | 2 +-
 src/viewpanel/components/Collapsible.tsx | 5 +++--
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/assets/media/styles.css b/assets/media/styles.css
index db5aaaef..359baf65 100644
--- a/assets/media/styles.css
+++ b/assets/media/styles.css
@@ -21,6 +21,10 @@
   }
 }
 
+.absolute {
+  position: absolute !important;
+}
+
 .collapsible__body,
 .ext_settings {
 	padding: 1rem 1.25rem;
diff --git a/src/viewpanel/ViewPanel.tsx b/src/viewpanel/ViewPanel.tsx
index 88ec64dc..7e3fe811 100644
--- a/src/viewpanel/ViewPanel.tsx
+++ b/src/viewpanel/ViewPanel.tsx
@@ -58,7 +58,7 @@ export const ViewPanel: React.FunctionComponent<IViewPanelProps> = (props: React
           settings && metadata && <Actions metadata={metadata} settings={settings} />
         }
 
-        <Collapsible title="Metadata">
+        <Collapsible title="Metadata" className={`absolute`}>
           {
             <TagPicker type={TagType.keywords} 
                        icon={<SymbolKeywordIcon />}
diff --git a/src/viewpanel/components/Collapsible.tsx b/src/viewpanel/components/Collapsible.tsx
index 62876064..d905540f 100644
--- a/src/viewpanel/components/Collapsible.tsx
+++ b/src/viewpanel/components/Collapsible.tsx
@@ -3,10 +3,11 @@ import { VsCollapsible } from './VscodeComponents';
 
 export interface ICollapsibleProps {
   title: string;
+  className?: string;
   sendUpdate?: (open: boolean) => void;
 }
 
-export const Collapsible: React.FunctionComponent<ICollapsibleProps> = ({children, title, sendUpdate}: React.PropsWithChildren<ICollapsibleProps>) => {
+export const Collapsible: React.FunctionComponent<ICollapsibleProps> = ({children, title, sendUpdate, className}: React.PropsWithChildren<ICollapsibleProps>) => {
   const [ isOpen, setIsOpen ] = React.useState(true);
 
   // This is a work around for a lit-element issue of duplicate slot names
@@ -23,7 +24,7 @@ export const Collapsible: React.FunctionComponent<ICollapsibleProps> = ({childre
 
   return (
     <VsCollapsible title={title} onClick={triggerClick} open={isOpen}>
-      <div className={`section collapsible__body`} slot="body">
+      <div className={`section collapsible__body ${className || ""}`} slot="body">
         {children}
       </div>
     </VsCollapsible>