Fix styling issues with the popover

Committed-by: Konstantin Schaper <konstantin.schaper@cloudogu.com>
Co-authored-by: Konstantin Schaper <konstantin.schaper@cloudogu.com>

scm-ui/ui-layout/src/card/Card.tsx

@@ -23,14 +23,9 @@
  */
 
 import React, { ComponentType, HTMLAttributes, ReactHTML, Ref } from "react";
-import styled from "styled-components";
 import classNames from "classnames";
 import CSS from "csstype";
 
-const CardRowsContainer = styled.div`
-  overflow: hidden;
-`;
-
 type Props = HTMLAttributes<HTMLElement> & {
   action?: React.ReactElement;
   /**
@@ -61,12 +56,12 @@ const Card = React.forwardRef<HTMLElement, Props>(
         ref,
         ...props,
       },
-      <CardRowsContainer
+      <div
         className="is-flex is-flex-direction-column is-justify-content-center is-flex-grow-1"
         style={{ gap: rowGap }}
       >
         {children}
-      </CardRowsContainer>,
+      </div>,
       action ? <span className="ml-2">{action}</span> : null
     )
 );

scm-ui/ui-layout/src/card/CardTitle.tsx

@@ -23,7 +23,6 @@
  */
 
 import React, { HTMLAttributes } from "react";
-import classNames from "classnames";
 
 type Props = HTMLAttributes<HTMLHeadingElement> & {
   /**
@@ -46,11 +45,10 @@ type Props = HTMLAttributes<HTMLHeadingElement> & {
  * @beta
  * @since 2.44.0
  */
-const CardTitle = React.forwardRef<HTMLHeadingElement, Props>(({ children, level = 3, className, ...props }, ref) =>
+const CardTitle = React.forwardRef<HTMLHeadingElement, Props>(({ children, level = 3, ...props }, ref) =>
   React.createElement(
     `h${level}`,
     {
-      className: classNames(className, "is-ellipsis-overflow"),
       ref,
       ...props,
     },

scm-ui/ui-overlays/src/popover/Popover.stories.tsx

@@ -33,6 +33,13 @@ export default {
 
 const Template: ComponentStory<typeof Popover> = (args) => <Popover {...args} />;
 
+export const WithShortBody = Template.bind({});
+WithShortBody.args = {
+  trigger: <button>a button</button>,
+  title: <h1>A title longer than the body</h1>,
+  children: <div>very short body</div>,
+};
+
 export const CiStatus = Template.bind({});
 CiStatus.args = {
   trigger: (

scm-ui/ui-overlays/src/popover/Popover.tsx

@@ -78,8 +78,8 @@ const Popover = React.forwardRef<HTMLDivElement, Props>(({ title, className, tri
           ref={ref}
           className={classNames("has-rounded-border", "p-2", "popover-content", "box", "popover", className)}
         >
-          <div className="is-flex">
+          <div className="is-flex is-align-items-center">
-            <TitleContainer>{title}</TitleContainer>
+            <TitleContainer className="mr-4">{title}</TitleContainer>
             <RadixPopover.Close asChild>
               <button className="delete popover-close" aria-label={t("popover.closeButton.ariaLabel")} />
             </RadixPopover.Close>

scm-ui/ui-styles/src/dark.scss

@@ -308,3 +308,11 @@ input[type="date"].input::-webkit-calendar-picker-indicator {
 .popover-close {
   background: $background;
 }
+
+.popover-close:hover {
+  background: $grey-darker !important;
+}
+
+.popover-close:focus {
+  background: $grey-darker !important;
+}

scm-ui/ui-styles/src/highcontrast.scss

@@ -380,3 +380,11 @@ input[type="date"].input::-webkit-calendar-picker-indicator {
 .popover-close {
   background: $white-ter;
 }
+
+.popover-close:hover {
+  background: $grey-light !important;
+}
+
+.popover-close:focus {
+  background: $grey-light !important;
+}