Update PlacesDetailPanel with more flexible styling

packages/core-data/src/components/PlaceDetailsPanel.js

@@ -49,7 +49,7 @@ const PlaceDetailsPanel = (props: Props) => {
 
   return (
     <aside
-      className='flex flex-col absolute z-10 h-full w-[280px] bg-white/80 backdrop-blur shadow overflow-y-auto'
+      className='flex flex-col relative z-10 h-full min-w-[280px] bg-white/80 backdrop-blur shadow overflow-y-auto'
       ref={el}
     >
       <button

packages/storybook/src/core-data/PlaceDetailsPanel.stories.js

@@ -1,11 +1,12 @@
 // @flow
 
 import { action } from '@storybook/addon-actions';
-import React from 'react';
+import React, { useState } from 'react';
 import PlaceDetailsPanel from '../../../core-data/src/components/PlaceDetailsPanel';
 import place from '../data/Place.json';
 import relatedMedia from '../data/RelatedMedia.json';
 import relatedPlaces from '../data/RelatedPlaces.json';
+import { Button, Modal, Sidebar } from 'semantic-ui-react';
 
 export default {
   title: 'Components/Core Data/PlaceDetailsPanel',
@@ -27,3 +28,61 @@ export const Default = () => (
     }]}
   />
 );
+
+export const SidebarVersion = () => {
+  const [visible, setVisible] = useState(false);
+  return (
+    <>
+      <Sidebar
+        visible={visible}
+      >
+        <PlaceDetailsPanel
+          onClose={() => setVisible(false)}
+          place={place}
+          related={[{
+            endpoint: 'media_contents',
+            ui_label: 'Related Media',
+            data: relatedMedia
+          }, {
+            endpoint: 'places',
+            ui_label: 'Related Places',
+            data: relatedPlaces
+          }]}
+        />
+      </Sidebar>
+      <Button onClick={() => setVisible(true)}>
+        Open Sidebar
+      </Button>
+    </>
+  )
+};
+
+export const ModalVersion = () => {
+  const [open, setOpen] = useState(false);
+  return (
+    <>    
+      <Modal
+        open={open}
+      >
+        <Modal.Content>
+          <PlaceDetailsPanel
+            onClose={() => setOpen(false)}
+            place={place}
+            related={[{
+              endpoint: 'media_contents',
+              ui_label: 'Related Media',
+              data: relatedMedia
+            }, {
+              endpoint: 'places',
+              ui_label: 'Related Places',
+              data: relatedPlaces
+            }]}
+          />
+        </Modal.Content>
+      </Modal>
+      <Button onClick={() => setOpen(true)}>
+        Open Modal
+      </Button>
+    </>
+  );
+};