fixed responsiveness of the website with small changes

ohcnetwork · Nov 19, 2024 · 645a562 · 645a562
1 parent 2dc5923
commit 645a562
Show file tree

Hide file tree

Showing 9 changed files with 23 additions and 12 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/CAREUI/interactive/FiltersSlideover.tsx b/src/CAREUI/interactive/FiltersSlideover.tsx
@@ -61,7 +61,7 @@ export const AdvancedFilterButton = ({ onClick }: { onClick: () => void }) => {
     <ButtonV2
       ghost
       border
-      className="w-full bg-white md:w-auto"
+      className="w-full bg-white md:w-auto mt-2"
       onClick={onClick}
       id="advanced-filter"
     >

diff --git a/src/components/Common/ButtonV2.tsx b/src/components/Common/ButtonV2.tsx
@@ -101,7 +101,7 @@ export const buttonStyles = ({
   shadow = !ghost,
 }: ButtonStyleProps) => {
   return classNames(
-    "inline-flex h-min cursor-pointer items-center justify-center gap-2 whitespace-pre font-medium outline-offset-1 transition-all duration-200 ease-in-out disabled:cursor-not-allowed disabled:bg-secondary-200 disabled:text-secondary-500",
+    "inline-flex h-min cursor-pointer items-center justify-center gap-2 whitespace-pre mt-2 font-medium outline-offset-1 transition-all duration-200 ease-in-out disabled:cursor-not-allowed disabled:bg-secondary-200 disabled:text-secondary-500",
     `button-size-${size}`,
     `button-shape-${circle ? "circle" : "square"}`,
     ghost ? `button-${variant}-ghost` : `button-${variant}-default`,

diff --git a/src/components/Common/Menu.tsx b/src/components/Common/Menu.tsx
@@ -36,7 +36,7 @@ export default function DropdownMenu({
       <Menu as="div" className="relative inline-block w-full text-left">
         <MenuButton
           disabled={props.disabled}
-          className={`button-size-${size} button-${variant}-default button-shape-square flex w-full cursor-pointer items-center justify-center gap-2 font-medium outline-offset-1 transition-all duration-200 ease-in-out disabled:cursor-not-allowed disabled:bg-secondary-200 disabled:text-secondary-500 lg:justify-between ${props.className}`}
+          className={`button-size-${size} button-${variant}-default button-shape-square flex w-full cursor-pointer items-center justify-center gap-2 font-medium outline-offset-1 transition-all duration-200 ease-in-out disabled:cursor-not-allowed disabled:bg-secondary-200 disabled:text-secondary-500 mt-2 lg:justify-between ${props.className}`}
         >
           <div
             className={classNames(

diff --git a/src/components/Facility/FacilityCard.tsx b/src/components/Facility/FacilityCard.tsx
@@ -88,7 +88,7 @@ export const FacilityCard = (props: {
                       </div>
                     )}
                     <div
-                      className="flex flex-wrap items-center justify-between"
+                      className="flex flex-wrap items-center gap-2 justify-between"
                       id="facility-name-card"
                     >
                       <div>
@@ -220,7 +220,7 @@ export const FacilityCard = (props: {
                       </form>
                     </DialogModal>
                   </div>
-                  <div className="flex flex-wrap gap-2">
+                  <div className="flex flex-wrap gap-2 justify-center">
                     {["DistrictAdmin", "StateAdmin"].includes(userType) && (
                       <ButtonV2
                         id="facility-notify"

diff --git a/src/components/Kanban/Board.tsx b/src/components/Kanban/Board.tsx
@@ -58,7 +58,7 @@ export default function KanbanBoard<T extends { id: string }>(
       </div>
       <DragDropContext onDragEnd={props.onDragEnd}>
         <div className="h-full overflow-scroll" ref={board}>
-          <div className="flex items-stretch px-0 pb-2">
+          <div className="flex items-stretch px-0 pb-2 containerss">
             {props.sections.map((section, i) => (
               <KanbanSection<T>
                 key={i}
@@ -146,7 +146,7 @@ export function KanbanSection<T extends { id: string }>(
         <div
           ref={provided.innerRef}
           className={
-            "relative mr-2 w-[300px] shrink-0 rounded-xl bg-secondary-200"
+            "relative mr-2 w-[300px] shrink-0 rounded-xl bg-secondary-200 bshadow"
           }
         >
           <div className="sticky top-0 rounded-xl bg-secondary-200 pt-2">

diff --git a/src/components/Patient/ManagePatients.tsx b/src/components/Patient/ManagePatients.tsx
@@ -841,7 +841,7 @@ export const PatientManager = () => {
               </p>
             </ButtonV2>
           </div>
-          <div className="flex w-full flex-col items-center justify-end gap-2 lg:ml-3 lg:w-fit lg:flex-row lg:gap-3">
+          <div className="flex w-full flex-col items-center justify-end flex-wrap gap-2 lg:ml-3 lg:w-fit lg:flex-row lg:gap-3">
             <Tabs
               tabs={[
                 { text: t("live"), value: 0 },

diff --git a/src/components/Patient/PatientConsentRecords.tsx b/src/components/Patient/PatientConsentRecords.tsx
@@ -232,7 +232,7 @@ export default function PatientConsentRecords(props: {
               <>
                 <label
                   className={
-                    "button-size-default button-shape-square button-primary-default inline-flex h-min w-full cursor-pointer items-center justify-center gap-2 whitespace-pre font-medium outline-offset-1 transition-all duration-200 ease-in-out"
+                    "button-size-default button-shape-square button-primary-default inline-flex mt-2 h-min w-full cursor-pointer items-center justify-center gap-2 whitespace-pre font-medium outline-offset-1 transition-all duration-200 ease-in-out"
                   }
                 >
                   <CareIcon icon={"l-file-upload-alt"} className="text-lg" />

diff --git a/src/style/index.css b/src/style/index.css
@@ -1315,3 +1315,14 @@ input[type="number"] {
         --radius:  0.5rem;
     }
 }
+@media screen and (max-width:915px){
+    .containerss{
+        flex-wrap: wrap;
+        gap: 5px;
+        margin-bottom: 5px;
+    }
+    .bshadow{
+        border:solid rgb(168, 168, 168);
+        /* box-shadow: 3px solid rgb(0, 0, 0) !important; */
+    }
+}