Cropping the screen to the left edge

crazychaz commented 3 months ago

Bug description

Screen cropping to the left edge when sending alerts in version 3.1.1

How to reproduce the bug

Send a dashboard report by email (3.1.1)

Screenshots/recordings

screen

Superset version

master / latest-dev

Python version

3.9

Node version

16

Browser

Chrome

Additional context

No response

Checklist

[ ] I have searched Superset docs and Slack and didn't find a solution to my problem.
[ ] I have searched the GitHub issue tracker and didn't find a similar bug report.
[ ] I have checked Superset's logs for errors and if I found a relevant Python stacktrace, I included it here as text in the "additional context" section.

dosubot[bot] commented 3 months ago

Hi @crazychaz!

I'm here to help you with any bugs, questions, or contributions you have for the repository. Let me know how I can assist you!

Dosu

To resolve the issue where the screen crops to the left edge when sending alerts in Apache Superset version 3.1.1, you need to adjust the CSS styles for the Alert component. Specifically, ensure that the padding is correctly set to avoid cropping.

Here is the relevant CSS snippet from the Alert component:

import React, { PropsWithChildren } from 'react';
import AntdAlert, { AlertProps as AntdAlertProps } from 'antd/lib/alert';
import { useTheme } from '@superset-ui/core';
import Icons from 'src/components/Icons';

export type AlertProps = PropsWithChildren<
  AntdAlertProps & { roomBelow?: boolean }
>;

export default function Alert(props: AlertProps) {
  const {
    type = 'info',
    description,
    showIcon = true,
    closable = true,
    roomBelow = false,
    children,
  } = props;

  const theme = useTheme();
  const { colors, typography, gridUnit } = theme;
  const { alert, error, info, success } = colors;

  let baseColor = info;
  let AlertIcon = Icons.InfoSolid;
  if (type === 'error') {
    baseColor = error;
    AlertIcon = Icons.ErrorSolid;
  } else if (type === 'warning') {
    baseColor = alert;
    AlertIcon = Icons.AlertSolid;
  } else if (type === 'success') {
    baseColor = success;
    AlertIcon = Icons.CircleCheckSolid;
  }

  return (
    <AntdAlert
      role="alert"
      showIcon={showIcon}
      icon={<AlertIcon aria-label={`${type} icon`} />}
      closeText={closable && <Icons.XSmall aria-label="close icon" />}
      css={{
        marginBottom: roomBelow ? gridUnit * 4 : 0,
        padding: `${gridUnit * 2}px ${gridUnit * 3}px`,
        alignItems: 'flex-start',
        border: 0,
        backgroundColor: baseColor.light2,
        '& .ant-alert-icon': {
          marginRight: gridUnit * 2,
        },
        '& .ant-alert-message': {
          color: baseColor.dark2,
          fontSize: typography.sizes.m,
          fontWeight: description
            ? typography.weights.bold
            : typography.weights.normal,
        },
        '& .ant-alert-description': {
          color: baseColor.dark2,
          fontSize: typography.sizes.m,
        },
      }}
      {...props}
    >
      {children}
    </AntdAlert>
  );
}

Ensure that the padding property is correctly set to avoid any cropping issues. The current padding is set to ${gridUnit * 2}px ${gridUnit * 3}px, which should provide sufficient space on the left and right sides. If the issue persists, you might need to adjust the padding values or check for any other conflicting styles that might be causing the cropping ^[1].

Additionally, ensure that your superset_config.py or superset_config_docker.py is properly configured for alerts and reports. Make sure the "ALERT_REPORTS" feature flag is set to True and that the necessary configurations for email or Slack notifications are in place. This includes setting up the beat_schedule in CeleryConfig and configuring the headless browser for taking screenshots ^[2].

To continue talking to Dosu, mention @dosu.

crazychaz commented 2 months ago

Your recommendations do not solve the current problem...

apache / superset