From 3f2f8feb306f56b3b294f750e66079ecb239496a Mon Sep 17 00:00:00 2001 From: MahtabBukhari Date: Mon, 11 Nov 2024 13:02:44 +0500 Subject: [PATCH 1/2] fix(logs): logs are too wide and issue with changing screen size --- src/components/Alerts/index.tsx | 22 +++++++++++++++------- 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/src/components/Alerts/index.tsx b/src/components/Alerts/index.tsx index 957688bc3..a35080472 100644 --- a/src/components/Alerts/index.tsx +++ b/src/components/Alerts/index.tsx @@ -5,12 +5,18 @@ import { Flex } from '~/components/common/Flex' import { Tooltip } from '~/components/common/ToolTip' import ClearIcon from '~/components/Icons/ClearIcon' import InfoIcon from '~/components/Icons/InfoIcon' -import { useDataStore } from '~/stores/useDataStore' +// import { useDataStore } from '~/stores/useDataStore' import { colors } from '~/utils' export const Alerts = () => { const [anchorEl, setAnchorEl] = useState(null) - const { runningProjectMessages } = useDataStore((s) => s) + // const { runningProjectMessages } = useDataStore((s) => s) + const runningProjectMessages = [ + 'lorem ipsum dolor sit amet lorem lorem ipsum dolor sit amet lorem lorem ipsum dolor sit amet lorem lorem ipsum dolor sit amet lorem', + 'lorem ipsum dolor sit amet lorem lorem ipsum dolor sit amet lorem lorem ipsum dolor sit amet lorem lorem ipsum dolor sit amet lorem', + 'lorem ipsum dolor sit amet lorem lorem ipsum dolor sit amet lorem lorem ipsum dolor sit amet lorem lorem ipsum dolor sit amet lorem', + 'lorem ipsum dolor sit amet lorem lorem ipsum dolor sit amet lorem lorem ipsum dolor sit amet lorem lorem ipsum dolor sit amet lorem lorem ', + ] const handleClick = (event: React.MouseEvent) => { setAnchorEl(event.currentTarget as HTMLElement) @@ -70,7 +76,7 @@ const AlertWrapper = styled(Flex).attrs({ const ContentWrapper = styled(Flex)` max-height: 50vh; - max-width: 30vw; + width: 20vw; background: transparent; padding-top: 1px !important; padding-bottom: 0 !important; @@ -150,9 +156,8 @@ const Info = styled(Flex).attrs({ const CloseButton = styled.div` position: absolute; - top: 0; - right: 0; - transform: translate(50%, -50%); + top: 5px; + right: 5px; cursor: pointer; display: none; z-index: 1; @@ -172,12 +177,15 @@ const CloseButton = styled.div` const StyledPopover = styled(Popover)` .MuiPopover-paper { - margin-top: 4px; + margin-top: 8px; background-color: transparent !important; box-shadow: none; background: ${colors.MESSAGE_BG}; border-radius: 6px; overflow: visible; + max-width: 90vw; + width: fit-content; + padding: 16px; &:hover { ${CloseButton} { From 0153960bef216b3bf9d24b0b40f94f6e3deba379 Mon Sep 17 00:00:00 2001 From: MahtabBukhari Date: Mon, 11 Nov 2024 13:03:53 +0500 Subject: [PATCH 2/2] fix(logs): logs are too wide and issue with changing screen size --- src/components/Alerts/index.tsx | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/src/components/Alerts/index.tsx b/src/components/Alerts/index.tsx index a35080472..682fd9b52 100644 --- a/src/components/Alerts/index.tsx +++ b/src/components/Alerts/index.tsx @@ -5,18 +5,12 @@ import { Flex } from '~/components/common/Flex' import { Tooltip } from '~/components/common/ToolTip' import ClearIcon from '~/components/Icons/ClearIcon' import InfoIcon from '~/components/Icons/InfoIcon' -// import { useDataStore } from '~/stores/useDataStore' +import { useDataStore } from '~/stores/useDataStore' import { colors } from '~/utils' export const Alerts = () => { const [anchorEl, setAnchorEl] = useState(null) - // const { runningProjectMessages } = useDataStore((s) => s) - const runningProjectMessages = [ - 'lorem ipsum dolor sit amet lorem lorem ipsum dolor sit amet lorem lorem ipsum dolor sit amet lorem lorem ipsum dolor sit amet lorem', - 'lorem ipsum dolor sit amet lorem lorem ipsum dolor sit amet lorem lorem ipsum dolor sit amet lorem lorem ipsum dolor sit amet lorem', - 'lorem ipsum dolor sit amet lorem lorem ipsum dolor sit amet lorem lorem ipsum dolor sit amet lorem lorem ipsum dolor sit amet lorem', - 'lorem ipsum dolor sit amet lorem lorem ipsum dolor sit amet lorem lorem ipsum dolor sit amet lorem lorem ipsum dolor sit amet lorem lorem ', - ] + const { runningProjectMessages } = useDataStore((s) => s) const handleClick = (event: React.MouseEvent) => { setAnchorEl(event.currentTarget as HTMLElement)