fix: css moderations and final changes

src/Home.module.css

@@ -6,6 +6,8 @@
 .panelWrapper {
   flex-direction: column;
   align-items: flex-start;
+  justify-content: flex-start;
+  width: 100%;
 }
 
 .contentWrapper {
@@ -19,7 +21,7 @@
 }
 
 .filterContainer {
-  flex: 0 0 220px; /* Do not grow, do not shrink, base width 220px */
+  flex: 0;
 }
 
 .postsArea {
@@ -43,6 +45,14 @@
   font-weight: 700;
 }
 
+.filterContainer button {
+  padding: 16px 18px 16px 0px;
+}
+.accordion span {
+  min-width: 140px;
+  margin-right: 10px;
+}
+
 .active,
 .accordion:hover {
   background-color: #ccc;
@@ -68,10 +78,16 @@ ul.chips {
   display: flex;
   gap: 6px;
   flex-wrap: wrap;
-  padding: 0 16px 16px 16px;
+  align-content: center;
+}
+
+.chip {
+  margin-right: 6px;
+  float: left;
+  padding: 4px;
+  justify-content: center;
 }
 
-/* --- Post List (flex, responsive) --- */
 .postList {
   display: flex;
   flex-wrap: wrap;
@@ -81,20 +97,17 @@ ul.chips {
 }
 
 .postList > * {
-  /* Default: 3 columns. The -20px accounts for gaps so cards fit nicely */
   flex: 1 1 calc(33.333% - 20px);
   max-width: calc(33.333% - 20px);
 }
 
-/* Medium screens: 2 columns */
 @media (max-width: 1000px) {
   .postList > * {
     flex: 1 1 calc(50% - 20px);
     max-width: calc(50% - 20px);
   }
 }
 
-/* Small screens: 1 column */
 @media (max-width: 768px) {
   .contentWrapper {
     flex-direction: column;

src/components/Home.tsx

@@ -187,6 +187,7 @@ const Home = () => {
                       id="check-dev-total"
                       name="total"
                       value="total"
+                      checked={DEV.every((d) => roles.includes(d))}
                       onChange={handleRoleCheck}
                     ></input>
                   </div>
@@ -197,6 +198,7 @@ const Home = () => {
                       id="check-dev-front"
                       name="check-dev-front"
                       value="FRONT"
+                      checked={roles.includes('FRONT')}
                       onChange={handleRoleCheck}
                     ></input>
                   </div>
@@ -207,6 +209,7 @@ const Home = () => {
                       id="check-dev-backend"
                       name="backend"
                       value="BACKEND"
+                      checked={roles.includes('BACKEND')}
                       onChange={handleRoleCheck}
                     ></input>
                   </div>
@@ -217,6 +220,7 @@ const Home = () => {
                       id="check-dev-app"
                       name="app"
                       value="APP"
+                      checked={roles.includes('APP')}
                       onChange={handleRoleCheck}
                     ></input>
                   </div>
@@ -227,6 +231,7 @@ const Home = () => {
                       id="check-dev-others"
                       name="others"
                       value="OTHERS"
+                      checked={roles.includes('OTHERS')}
                       onChange={handleRoleCheck}
                     ></input>
                   </div>
@@ -241,6 +246,7 @@ const Home = () => {
                       id="project-total"
                       name="PLANNING"
                       value="PLANNING"
+                      checked={roles.includes('PLANNING')}
                       onChange={handleRoleCheck}
                     ></input>
                   </div>
@@ -255,6 +261,7 @@ const Home = () => {
                       id="design-total"
                       name="DESIGN"
                       value="DESIGN"
+                      checked={roles.includes('DESIGN')}
                       onChange={handleRoleCheck}
                     ></input>
                   </div>
@@ -268,6 +275,7 @@ const Home = () => {
                       id="marketing-total"
                       name="MARKETING"
                       value="MARKETING"
+                      checked={roles.includes('MARKETING')}
                       onChange={handleRoleCheck}
                     ></input>
                   </div>