fix: relic scorer rendering

fribbels · Nov 25, 2024 · 99ad4af · 99ad4af
1 parent c18c19e
commit 99ad4af
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 9 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -38,6 +38,7 @@ const App = () => {
   useEffect(() => {
     console.log('setting language to:', i18n.resolvedLanguage)
   }, [i18n.resolvedLanguage])
+
   return (
     <ConfigProvider theme={globalThemeConfig}>
       {messageContextHolder}

diff --git a/src/lib/characterPreview/ShowcaseLightCone.tsx b/src/lib/characterPreview/ShowcaseLightCone.tsx
@@ -1,7 +1,7 @@
 import { Flex, Typography } from 'antd'
 import { showcaseDropShadowFilter, showcaseOutline, showcaseShadow, ShowcaseSource } from 'lib/characterPreview/CharacterPreviewComponents'
 import { ShowcaseDisplayDimensions, ShowcaseMetadata } from 'lib/characterPreview/characterPreviewController'
-import StatText from 'lib/characterPreview/StatText'
+import StatText, { StatTextEllipses } from 'lib/characterPreview/StatText'
 import { middleColumnWidth, parentW } from 'lib/constants/constantsUi'
 import { LoadingBlurredImage } from 'lib/ui/LoadingBlurredImage'
 import React from 'react'
@@ -206,13 +206,11 @@ export function ShowcaseLightConeLargeName(props: {
 
   return (
     <Flex vertical style={{ width: middleColumnWidth }}>
-      <StatText
+      <StatTextEllipses
         style={{ fontSize: 18, fontWeight: 400, marginLeft: 10, marginRight: 10, textAlign: 'center' }}
-        ellipsis={true}
       >
         {`${lightConeName}`}
-        &nbsp;
-      </StatText>
+      </StatTextEllipses>
       <StatText style={{ fontSize: 18, fontWeight: 400, textAlign: 'center' }}>
         {
           `${t('common:LevelShort', { level: lightConeLevel })} ${t('common:SuperimpositionNShort', { superimposition: lightConeSuperimposition })}`

diff --git a/src/lib/characterPreview/StatText.tsx b/src/lib/characterPreview/StatText.tsx
@@ -9,6 +9,14 @@ const StatText = styled(Text)`
     font-weight: 400;
     white-space: nowrap;
 `
+export const StatTextEllipses = styled(Text)`
+    font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif;
+    font-size: 17px;
+    font-weight: 400;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+`
 export const StatTextSm = styled(Text)`
     font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif;
     font-size: 16px;

diff --git a/src/lib/overlays/modals/ScoringModal.tsx b/src/lib/overlays/modals/ScoringModal.tsx
@@ -170,7 +170,6 @@ export default function ScoringModal() {
       centered
       onOk={onModalOk}
       onCancel={handleCancel}
-      forceRender
       footer={[
         <Button key='back' onClick={handleCancel}>
           {t('common:Cancel')/* Cancel */}

diff --git a/src/lib/rendering/theme.ts b/src/lib/rendering/theme.ts
@@ -105,6 +105,9 @@ export function getGlobalThemeConfigFromColorTheme(colorTheme: ColorThemeOverrid
       Notification: {
         width: 450,
       },
+      Dropdown: {
+        zIndexPopup: 900,
+      },
     },
     algorithm: theme.darkAlgorithm,
   }

diff --git a/src/lib/tabs/tabShowcase/RelicScorerTab.jsx b/src/lib/tabs/tabShowcase/RelicScorerTab.jsx
@@ -342,7 +342,6 @@ function CharacterPreviewSelection(props) {
   function selectionChange(selected) {
     console.log('selectionChange', selected)
     props.setSelectedCharacter(props.availableCharacters.find((x) => x.id == selected))
-    setScoringAlgorithmFocusCharacter(selected)
   }
 
   async function simulateClicked() {
@@ -452,6 +451,7 @@ function CharacterPreviewSelection(props) {
       <Flex vertical align='center' gap={5} style={{ marginBottom: 100, width: 1068 }}>
         <Flex vertical style={{ display: (props.availableCharacters.length > 0) ? 'flex' : 'none', width: '100%' }}>
           <Sidebar presetClicked={presetClicked} activeKey={activeKey}/>
+
           <Flex
             style={{ display: (props.availableCharacters.length > 0) ? 'flex' : 'none' }}
             justify='space-between'
@@ -498,7 +498,8 @@ function CharacterPreviewSelection(props) {
           onChange={selectionChange}
           value={props.selectedCharacter?.id}
         />
-        <Flex id='previewWrapper' style={{ padding: '5px' }}>
+
+        <div id='previewWrapper' style={{ padding: '5px' }}>
           <CharacterPreview
             class='relicScorerCharacterPreview'
             character={props.selectedCharacter}
@@ -507,7 +508,7 @@ function CharacterPreviewSelection(props) {
             setOriginalCharacterModalOpen={setCharacterModalOpen}
             setOriginalCharacterModalInitialCharacter={setCharacterModalInitialCharacter}
           />
-        </Flex>
+        </div>
 
         <CharacterModal
           onOk={onCharacterModalOk}
@@ -592,6 +593,7 @@ function Sidebar(props) {
       gap={5}
     >
       <Dropdown
+        zIndexPopup={10}
         dropdownRender={() => (dropdownDisplay)}
         open={open}
       >