responsive card title

src/App.css

@@ -14,3 +14,9 @@
     content: unset;
   }
 }
+
+@media (min-width: 576px) {
+  .res {
+    display: none;
+  }
+}

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 (
       <>
-      <Card
-        title={t("calendar.cardPersonalCalendarSettings.title")}
-        extra={
+        <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)}>
+          <Button
+            danger
+            onClick={() => setIsModalOpen(true)}
+            style={{ paddingBottom: 10 }}
+          >
             {t("calendar.unlinkGoogleCalendar.button")}
           </Button>
         </Space>
+      </>
+    );
+  };
+
+  return (
+    <>
+      <Card
+        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}>

src/index.css

@@ -6,7 +6,6 @@ body {
 
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  background-color: #f4f4f5;
 }
 
 code {