#43 - Fix for collapsible sections

assets/media/styles.css

@@ -21,6 +21,10 @@
   }
 }
 
+.absolute {
+  position: absolute !important;
+}
+
 .collapsible__body,
 .ext_settings {
 	padding: 1rem 1.25rem;

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 />}

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>