see ess ess

Author: gjmooney

packages/base/src/panelview/components/story-maps/StoryViewerPanel.tsx

@@ -143,7 +143,7 @@ function StoryViewerPanel({ model, togglePreview }: IStoryViewerPanelProps) {
   }
 
   return (
-    <div style={{ overflow: 'hidden' }}>
+    <div className="jgis-story-viewer-panel" style={{ overflow: 'hidden' }}>
       {/* Image container with title overlay */}
       {activeSlide?.content?.image ? (
         <div style={{ position: 'relative', width: '100%', height: '30%' }}>
@@ -164,8 +164,12 @@ function StoryViewerPanel({ model, togglePreview }: IStoryViewerPanelProps) {
               top: 0,
               left: 0,
               width: '100%',
-              margin: 0,
-              padding: '1rem',
+              marginTop: 0,
+              marginBottom: 0,
+              marginLeft: 'auto',
+              marginRight: 'auto',
+              paddingTop: '1rem',
+              paddingBottom: '1rem',
               color: 'white',
               textShadow: '2px 2px 4px rgba(0, 0, 0, 0.8)',
               backgroundColor: 'rgba(0, 0, 0, 0.3)',
@@ -189,7 +193,7 @@ function StoryViewerPanel({ model, togglePreview }: IStoryViewerPanelProps) {
           : 'Slide Title'}
       </h3> */}
       {activeSlide?.content?.markdown && (
-        <div className="jgis-story-panel-content" style={{ paddingLeft: 32 }}>
+        <div className="jgis-story-viewer-content" style={{ paddingLeft: 16 }}>
           <Markdown>{activeSlide.content.markdown}</Markdown>
         </div>
       )}

packages/base/src/panelview/rightpanel.tsx

@@ -136,7 +136,11 @@ export const RightPanel: React.FC<IRightPanelProps> = props => {
             </TabsContent>
           )}
 
-        <TabsContent value="storyPanel" className="jgis-panel-tab-content">
+        <TabsContent
+          value="storyPanel"
+          className="jgis-panel-tab-content"
+          style={{ paddingTop: 0 }}
+        >
           {settings.storyMapPresentation || !displayEditor ? (
             <StoryViewerPanel
               model={props.model}

packages/base/style/shared/tabs.css

@@ -1,7 +1,7 @@
 .jgis-panel-tabs {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  /* gap: 1rem; */
   justify-content: center;
   align-items: center;
   background-color: var(--jp-layout-color0);
@@ -20,7 +20,8 @@
   gap: 1rem;
   width: 100%;
   font-size: 9px;
-  border-radius: 5px;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
   overflow-x: scroll;
 }
 
@@ -62,6 +63,7 @@
   width: 100%;
   overflow-y: scroll;
   max-height: 480px;
+  padding-top: 1rem;
 }
 
 .jgis-tabs-content:focus-visible {

packages/base/style/storyPanel.css

@@ -1,9 +1,13 @@
-.jgis-story-panel-content p,
-.jgis-story-panel-content span,
-.jgis-story-panel-content li {
+.jgis-story-viewer-panel * {
+    box-sizing: border-box;
+}
+
+.jgis-story-viewer-content p,
+.jgis-story-viewer-content span,
+.jgis-story-viewer-content li {
   font-size: var(--jp-ui-font-size2);
 }
 
-.jgis-story-panel-content > ul {
+.jgis-story-viewer-content > ul {
   padding-left: 1rem;
 }

packages/base/style/tabPanel.css

@@ -1,6 +1,5 @@
 .jgis-panel-tab-content {
-  border-radius: 5px;
-  font-size: 10px;
+  font-size: var(--jp-ui-font-size0);
   padding-bottom: 50px;
 }