Merge pull request #787 from digirati-co-uk/hotfix/dropdown-overflow-fix

Hotfix/dropdown overflow fix
digirati-co-uk · Aug 16, 2023 · a9856ae · a9856ae
2 parents 98b32c6 + 4497222
commit a9856ae
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 13 deletions.
diff --git a/services/madoc-ts/src/frontend/shared/atoms/CanvasViewerGrid.tsx b/services/madoc-ts/src/frontend/shared/atoms/CanvasViewerGrid.tsx
@@ -19,11 +19,26 @@ export const CanvasViewerGridContent = styled.div<{ $vertical?: boolean }>`
 
 export const CanvasViewerGridSidebar = styled.div<{ $vertical?: boolean }>`
  width: ${props => (props.$vertical ? '100%' : '420px')};
- max-height: 100%;
+ max-height: 80vh;
+ min-height: 100%;
  display: flex;
  flex-direction: column;
+ overflow: auto;
+`;
+
+export const CanvasViewerEditorStyleReset = styled.div`
+ font-size: 13px;
+ padding: 0 1em;
+ //overflow-x: scroll;
 `;
 
+export const ContributionSaveButton = styled.div`
+ background: white;
+ position: sticky;
+ bottom: 0;
+ z-index: 9;
+ border-top: 1px solid rgb(197, 190, 190);
+`;
 export const CanvasViewerContentOverlay = styled.div`
  position: absolute;
  bottom: 50%;
@@ -54,10 +69,3 @@ export const CanvasViewerButton = styled(Button)`
  outline: 2px solid orange;
  }
 `;
-
-export const CanvasViewerEditorStyleReset = styled.div`
- font-size: 13px;
- padding: 0 1em;
- min-height: 0;
- overflow-y: auto;
-`;
diff --git a/...madoc-ts/src/frontend/shared/capture-models/editor/components/RoundedCard/RoundedCard.tsx b/...madoc-ts/src/frontend/shared/capture-models/editor/components/RoundedCard/RoundedCard.tsx
@@ -40,7 +40,7 @@ const CardWrapper = styled.article<{ size: CardSize; interactive: boolean }>`
  margin-bottom: ${props => getCard(props, 'margin')};
  //box-shadow: ${props => getTheme(props).card.shadow};
  border: 1px solid #ddd;
- z-index: 2;
+ z-index: 10;
  ${props =>
  props.interactive &&
  css`

diff --git a/services/madoc-ts/src/frontend/shared/capture-models/new/CoreModelEditor.tsx b/services/madoc-ts/src/frontend/shared/capture-models/new/CoreModelEditor.tsx
@@ -15,6 +15,7 @@ import {
  CanvasViewerGrid,
  CanvasViewerGridContent,
  CanvasViewerGridSidebar,
+ ContributionSaveButton,
 } from '../../atoms/CanvasViewerGrid';
 import { CreateModelTestCase } from '../../../site/features/admin/CreateModelTestCase';
 import { OpenSeadragonViewer } from '../../../site/features/OpenSeadragonViewer.lazy';
@@ -358,7 +359,9 @@ export function CoreModelEditor({
  <EditorSlots.TopLevelEditor />
  </CanvasViewerEditorStyleReset>
 
- <EditorSlots.SubmitButton afterSave={onAfterSave} />
+ <ContributionSaveButton>
+ <EditorSlots.SubmitButton afterSave={onAfterSave} />
+ </ContributionSaveButton>
  </>
  ) : (
  <EmptyState>{t('Loading your model')}</EmptyState>

diff --git a/services/madoc-ts/src/frontend/site/features/contributor/ManifestCaptureModelEditor.tsx b/services/madoc-ts/src/frontend/site/features/contributor/ManifestCaptureModelEditor.tsx
@@ -22,7 +22,7 @@ import { useProject } from '../../hooks/use-project';
 import { useProjectStatus } from '../../hooks/use-project-status';
 import { RouteContext, useRouteContext } from '../../hooks/use-route-context';
 import { CanvasModelUserStatus } from './CanvasModelUserStatus';
-import { CanvasViewerEditorStyleReset } from '../../../shared/atoms/CanvasViewerGrid';
+import { CanvasViewerEditorStyleReset, ContributionSaveButton } from '../../../shared/atoms/CanvasViewerGrid';
 import { useSiteConfiguration } from '../SiteConfigurationContext';
 import { useLoadedCaptureModel } from '../../../shared/hooks/use-loaded-capture-model';
 
@@ -158,7 +158,9 @@ export function ManifestCaptureModelEditor({ revision }: { revision: string; isS
  <EditorSlots.TopLevelEditor />
  </CanvasViewerEditorStyleReset>
 
- <EditorSlots.SubmitButton afterSave={onAfterSave} />
+ <ContributionSaveButton>
+ <EditorSlots.SubmitButton afterSave={onAfterSave} />
+ </ContributionSaveButton>
  </>
  ) : (
  <EmptyState>{t('Loading your model')}</EmptyState>

diff --git a/services/madoc-ts/src/frontend/site/pages/tasks/review-listing/single-review.tsx b/services/madoc-ts/src/frontend/site/pages/tasks/review-listing/single-review.tsx
@@ -340,7 +340,7 @@ function ViewSingleReview({
  ) : null}
  </ReviewActionBar>
  <ReviewPreview>
- <div style={{ flexGrow: 1, maxWidth: 300 }}>
+ <div style={{ flexGrow: 1, maxWidth: 300, overflowX: 'scroll' }}>
  <CanvasViewerEditorStyleReset>
  <EditorSlots.TopLevelEditor />
  </CanvasViewerEditorStyleReset>