Merge pull request #45 from rahulg1254/admin-master

Issue #223609: fixed label issue on block component
tekdi · Jul 23, 2024 · d8017e7 · d8017e7
2 parents 7db7457 + fdd8add
commit d8017e7
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 12 deletions.
diff --git a/src/pages/block.tsx b/src/pages/block.tsx
@@ -11,6 +11,7 @@ import MenuItem from "@mui/material/MenuItem";
 import Select, { SelectChangeEvent } from "@mui/material/Select";
 import PageSizeSelector from "@/components/PageSelector";
 import { useTranslation } from "next-i18next";
+import { useMediaQuery } from "@mui/material";
 
 // Static Data
 const staticStateData = [
@@ -38,6 +39,8 @@ const Block: React.FC = () => {
   const [pageSize, setPageSize] = useState<number>(10);
   const [sortDirection, setSortDirection] = useState<"asc" | "desc">("asc");
   const [selectedFilter, setSelectedFilter] = useState("All");
+  const isMobile = useMediaQuery("(max-width:600px)");
+  const isMediumScreen = useMediaQuery("(max-width:986px)");
 
   const columns = useMemo(
     () => [
@@ -142,10 +145,27 @@ const Block: React.FC = () => {
   return (
     <React.Fragment>
       <HeaderComponent {...userProps}>
-        <Box sx={{ minWidth: 240, display: "flex", gap: 5 }}>
-          <Box sx={{ minWidth: 240 }}>
-            <FormControl sx={{ minWidth: 240 }}>
-              <InputLabel id="state-select-label">States</InputLabel>
+        <Box
+          sx={{
+            display: "flex",
+            justifyContent: "center",
+            gap: 5,
+            marginTop: 2,
+            "@media (max-width: 580px)": {
+              marginTop: 10,
+              flexDirection: "column",
+              alignItems: "center",
+            },
+          }}
+        >
+          <Box sx={{ width: "100%" }}>
+            <FormControl sx={{ width: "100%" }}>
+              <InputLabel
+                sx={{ backgroundColor: "#F7F7F7", padding: "2px 8px" }}
+                id="state-select-label"
+              >
+                States
+              </InputLabel>
               <Select
                 labelId="state-select-label"
                 id="state-select"
@@ -164,9 +184,14 @@ const Block: React.FC = () => {
               </Select>
             </FormControl>
           </Box>
-          <Box sx={{ minWidth: 240 }}>
-            <FormControl sx={{ minWidth: 240 }}>
-              <InputLabel id="district-select-label">Districts</InputLabel>
+          <Box sx={{ width: "100%" }}>
+            <FormControl sx={{ width: "100%" }}>
+              <InputLabel
+                sx={{ backgroundColor: "#F7F7F7", padding: "2px 8px" }}
+                id="district-select-label"
+              >
+                Districts
+              </InputLabel>
               <Select
                 labelId="district-select-label"
                 id="district-select"

diff --git a/src/pages/district.tsx b/src/pages/district.tsx
@@ -87,7 +87,7 @@ const District: React.FC = () => {
       setSelectedState(selectedState);
       try {
         const data = await getDistrictList(selectedState);
-        setDistrictData(data.result || []); 
+        setDistrictData(data.result || []);
         setSelectedDistrict(data.result[0]?.label || "-");
       } catch (error) {
         console.error("Error fetching district data", error);
@@ -122,11 +122,11 @@ const District: React.FC = () => {
     const fetchStateData = async () => {
       try {
         const data = await getStateList();
-        setStateData(data.result || []); 
+        setStateData(data.result || []);
         const initialSelectedState = data.result[0]?.value || "";
         setSelectedState(initialSelectedState);
         const districtData = await getDistrictList(initialSelectedState);
-        setDistrictData(districtData.result || []); 
+        setDistrictData(districtData.result || []);
         setSelectedDistrict(districtData.result[0]?.label || "-");
       } catch (error) {
         console.error("Error fetching state data", error);
@@ -172,8 +172,19 @@ const District: React.FC = () => {
   return (
     <React.Fragment>
       <HeaderComponent {...userProps}>
-        <Box sx={{ minWidth: 240 }}>
-          <FormControl sx={{ minWidth: 240 }}>
+        <Box
+          sx={{
+            minWidth: 240,
+            marginTop: 2,
+            "@media (max-width: 580px)": {
+              marginTop: 3,
+              marginBottom: 3,
+              flexDirection: "column",
+              alignItems: "center",
+            },
+          }}
+        >
+          <FormControl sx={{ minWidth: 340 }}>
             <InputLabel id="state-select-label">States</InputLabel>
             <Select
               labelId="state-select-label"