From d4ee5de16f55ef4e521262985e2c5646910599fd Mon Sep 17 00:00:00 2001
From: alex <alex@roese.dev>
Date: Wed, 24 Jan 2024 22:39:34 +0100
Subject: [PATCH] responsive card title

---
 src/App.css                       |  6 +++
 src/Pages/Store/Calendar/index.js | 76 ++++++++++++++++++++++++++-----
 src/index.css                     |  1 -
 3 files changed, 70 insertions(+), 13 deletions(-)

diff --git a/src/App.css b/src/App.css
index 6c3915e..b5860cb 100644
--- a/src/App.css
+++ b/src/App.css
@@ -14,3 +14,9 @@
     content: unset;
   }
 }
+
+@media (min-width: 576px) {
+  .res {
+    display: none;
+  }
+}
diff --git a/src/Pages/Store/Calendar/index.js b/src/Pages/Store/Calendar/index.js
index 37932de..a219aad 100644
--- a/src/Pages/Store/Calendar/index.js
+++ b/src/Pages/Store/Calendar/index.js
@@ -3,11 +3,13 @@ import {
   Card,
   Col,
   Form,
+  Grid,
   Result,
   Row,
   Space,
   Spin,
   Switch,
+  Typography,
 } from "antd";
 import { useTranslation } from "react-i18next";
 import {
@@ -32,6 +34,8 @@ import MyModal, {
 } from "../../../Components/MyModal";
 import { useParams } from "react-router-dom";
 
+const { useBreakpoint } = Grid;
+
 export default function StoreCalendar() {
   const { t } = useTranslation();
   const { storeId } = useParams();
@@ -145,6 +149,7 @@ function CardPersonalCalendarSettings({ settings }) {
   const { t } = useTranslation();
   const [form] = Form.useForm();
   const [formUnlinkCalendar] = Form.useForm();
+  const screenBreakpoint = useBreakpoint();
 
   const [requestState, setRequestState] = useState(RequestState.INIT);
   const delayTimeout = useRef();
@@ -201,21 +206,68 @@ function CardPersonalCalendarSettings({ settings }) {
     formUnlinkCalendar.resetFields();
   }, [isModalOpen]);
 
+  const CardTitleContent = () => {
+    return (
+      <>
+        <Typography.Title
+          level={5}
+          style={{
+            padding: 0,
+            margin: 0,
+          }}
+        >
+          {t("calendar.cardPersonalCalendarSettings.title")}
+        </Typography.Title>
+
+        <Space>
+          <RequestStateItem
+            state={requestState}
+            setRequestState={setRequestState}
+          />
+
+          <Button
+            danger
+            onClick={() => setIsModalOpen(true)}
+            style={{ paddingBottom: 10 }}
+          >
+            {t("calendar.unlinkGoogleCalendar.button")}
+          </Button>
+        </Space>
+      </>
+    );
+  };
+
   return (
     <>
       <Card
-        title={t("calendar.cardPersonalCalendarSettings.title")}
-        extra={
-          <Space>
-            <RequestStateItem
-              state={requestState}
-              setRequestState={setRequestState}
-            />
-
-            <Button danger onClick={() => setIsModalOpen(true)}>
-              {t("calendar.unlinkGoogleCalendar.button")}
-            </Button>
-          </Space>
+        title={
+          screenBreakpoint.xl ? (
+            <div
+              style={{
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+                justifyItems: "center",
+                alignContent: "center",
+                overflow: "scroll",
+              }}
+            >
+              <CardTitleContent />
+            </div>
+          ) : (
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "column",
+                paddingTop: 10,
+                paddingBottom: 10,
+                textOverflow: "ellipsis",
+                wordWrap: "break-word",
+              }}
+            >
+              <CardTitleContent />
+            </div>
+          )
         }
       >
         <Form form={form} requiredMark={false}>
diff --git a/src/index.css b/src/index.css
index da5b536..c951020 100644
--- a/src/index.css
+++ b/src/index.css
@@ -6,7 +6,6 @@ body {
 
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  background-color: #f4f4f5;
 }
 
 code {