fix: Css of modules overview card (#3784)

* fix: use flex-wrap for layout of cards in resource details

* fix: keep div wrapper of status card

* fix companion css

Author: chriskari

src/components/KymaCompanion/components/KymaCompanion.scss

@@ -1,5 +1,10 @@
 #companion_wrapper {
-  width: 100%;
+  width: calc(100% - 1rem);
+  position: absolute;
+  top: 0.5rem;
+  left: 0.5rem;
+  right: 0.5rem;
+  bottom: 0.5rem;
 
   .kyma-companion {
     height: 100%;

src/components/KymaCompanion/components/KymaCompanion.tsx

@@ -49,7 +49,7 @@ export default function KymaCompanion() {
   }
 
   return (
-    <div id="companion_wrapper" className="sap-margin-tiny">
+    <div id="companion_wrapper">
       <Card
         className="kyma-companion"
         header={

src/shared/components/ResourceDetails/ResourceDetails.scss

@@ -15,8 +15,9 @@
 }
 
 .resource-details-container {
-  display: grid;
-  grid-template-columns: 100%;
+  margin-inline: 1rem;
+  display: flex;
+  flex-wrap: wrap;
   gap: 1rem;
 }
 
@@ -38,21 +39,3 @@
     min-width: 300px;
   }
 }
-
-@container (min-width: 1100px) {
-  .resource-details-container {
-    grid-template-columns: fit-content(100%) max-content;
-    gap: 0;
-
-    &.column-view {
-      display: flex;
-      flex-direction: row;
-      flex-wrap: wrap;
-      gap: 1rem;
-
-      & > * {
-        flex-grow: 1;
-      }
-    }
-  }
-}

src/shared/components/ResourceDetails/ResourceDetailsCard.js

@@ -8,7 +8,7 @@ export default function ResourceDetailsCard({
   className = '',
 }) {
   return (
-    <div className={`${wrapperClassname} sap-margin-x-small`}>
+    <div className={`${wrapperClassname}`}>
       <Card className={className} header={<CardHeader titleText={titleText} />}>
         <div className="cluster-overview__details-grid sap-margin-small sap-margin-top-tiny">
           {content}

src/shared/components/ResourceStatusCard/ResourceStatusCard.js

@@ -13,7 +13,7 @@ export function ResourceStatusCard({
   const { t } = useTranslation();
 
   return (
-    <div className="sap-margin-x-small">
+    <div>
       <Card
         header={
           <div className="resource-status-card__header">