Incorrect alert message styling for long version conditions

Squash commits of branch bugfix/alert_styling:

- Fix styling of alerts

- Update documentation

- Add changelog entry

- Wrap section in anchor tag

- Change width of alert dropdown to be 100vw if screen width is mobile (less than 768px)

- Remove superfluous style

Only the truly clickable area should show the matching styles.

gradle/changelog/alert_styling.yaml

@@ -0,0 +1,2 @@
+- type: fixed
+  description: Incorrect alert message styling for long version conditions

scm-ui/ui-webapp/src/components/HeaderDropDown.tsx

@@ -35,12 +35,6 @@ const DropDownMenu = styled.div<DropDownMenuProps>`
   }
 
   @media screen and (max-width: ${devices.mobile.width}px) {
-    ${(props) =>
-      props.mobilePosition === "right" &&
-      css`
-        right: -1.5rem;
-        left: auto;
-      `};
     position: fixed;
     top: auto;
   }
@@ -80,8 +74,11 @@ const DropDownMenu = styled.div<DropDownMenuProps>`
       props.mobilePosition === "right" &&
       css`
         @media screen and (max-width: ${devices.mobile.width}px) {
-          left: auto;
-          right: 1.75rem;
+          left: 21.75rem;
+        }
+
+        @media screen and (min-width: ${devices.mobile.width + 1}px) and (max-width: ${devices.tablet.width - 1}px) {
+          left: 19.65rem;
         }
       `};
   }

scm-ui/ui-webapp/src/containers/Alerts.tsx

@@ -18,17 +18,23 @@ import React, { FC } from "react";
 import { useTranslation } from "react-i18next";
 import classNames from "classnames";
 import styled from "styled-components";
-import { Alert } from "@scm-manager/ui-types";
-import { DateFromNow, Icon } from "@scm-manager/ui-components";
 import { useAlerts } from "@scm-manager/ui-api";
-import HeaderDropDown, { Column, OnlyMobileWrappingColumn, Table } from "../components/HeaderDropDown";
+import { DateFromNow } from "@scm-manager/ui-components";
+import { Icon } from "@scm-manager/ui-core";
+import { Alert } from "@scm-manager/ui-types";
+import HeaderDropDown from "../components/HeaderDropDown";
 
-const FullHeightTable = styled(Table)`
-  height: 100%;
+const AlertDropdown = styled.div`
+  @media screen and (max-width: 768px) {
+    width: 100vw;
+  }
 `;
 
-const RightColumn = styled(OnlyMobileWrappingColumn)`
-  height: 100%;
+const AlertContainer = styled.ul`
+  > *:not(:last-child) {
+    border-bottom: solid 2px var(--scm-border-color);
+  }
+  border-left: 3px solid var(--scm-danger-color);
 `;
 
 type EntryProps = {
@@ -36,27 +42,18 @@ type EntryProps = {
 };
 
 const AlertsEntry: FC<EntryProps> = ({ alert }) => {
-  const navigateTo = () => {
-    if (alert.link) {
-      window.open(alert.link)?.focus();
-    }
-  };
-
   return (
-    <tr onClick={navigateTo} className={classNames("is-danger", { "is-clickable": !!alert.link })}>
-      <Column>
-        <p className="has-text-weight-bold">{alert.title}</p>
-        <p>{alert.description}</p>
-      </Column>
-      <RightColumn className="has-text-right">
-        <div className="is-flex is-flex-direction-column is-justify-content-space-between">
-          <p className="has-text-weight-semibold">
-            {alert.component} {alert.affectedVersions}
-          </p>
+    <li className={classNames("is-danger has-text-secondary-more px-4 py-3")}>
+      <a href={alert.link} target="_blank" rel="noreferrer">
+        <section>
+          <h2 className="has-text-weight-bold">
+            {alert.title} ({alert.component} {alert.affectedVersions})
+          </h2>
+          <p>{alert.description}</p>
           <DateFromNow date={alert.issuedAt} className="is-size-7" />
-        </div>
-      </RightColumn>
-    </tr>
+        </section>
+      </a>
+    </li>
   );
 };
 
@@ -65,20 +62,22 @@ type Props = {
 };
 
 const AlertsList: FC<Props> = ({ data }) => (
-  <div className="dropdown-content p-0">
-    <FullHeightTable className="table card-table mb-0 is-fullheight">
-      <tbody>
-        {data.map((a, i) => (
-          <AlertsEntry key={i} alert={a} />
-        ))}
-      </tbody>
-    </FullHeightTable>
-  </div>
+  <AlertDropdown className="dropdown-content p-0 is-full-mobile">
+    <AlertContainer className="card-table mb-0 is-flex is-flex-direction-column has-text-left">
+      {data.map((a, i) => (
+        <AlertsEntry key={i} alert={a} />
+      ))}
+    </AlertContainer>
+  </AlertDropdown>
 );
 
 const ShieldNotificationIcon: FC = () => {
   const [t] = useTranslation("commons");
-  return <Icon className="is-size-4" name="shield-alt" color="inherit" alt={t("alerts.shieldTitle")} />;
+  return (
+    <Icon className="is-size-4" alt={t("alerts.shieldTitle")}>
+      shield-alt
+    </Icon>
+  );
 };
 
 type ComponentAlert = Alert & {
@@ -89,8 +88,8 @@ const useFlattenedAlerts = () => {
   const { data, error } = useAlerts();
 
   if (data) {
-    const flattenedAlerts: ComponentAlert[] = data.alerts?.map(a => ({ ...a, component: "core" })) || [];
-    data.plugins?.forEach(p => flattenedAlerts.push(...(p.alerts || []).map(a => ({ ...a, component: p.name }))));
+    const flattenedAlerts: ComponentAlert[] = data.alerts?.map((a) => ({ ...a, component: "core" })) || [];
+    data.plugins?.forEach((p) => flattenedAlerts.push(...(p.alerts || []).map((a) => ({ ...a, component: p.name }))));
     flattenedAlerts.sort((a, b) => {
       if (new Date(a.issuedAt) < new Date(b.issuedAt)) {
         return 1;
@@ -99,13 +98,13 @@ const useFlattenedAlerts = () => {
     });
     return {
       data: flattenedAlerts,
-      error
+      error,
     };
   }
 
   return {
     data,
-    error
+    error,
   };
 };