Fix responsiviness issue on the course objective block

rage · Jan 14, 2025 · 4b7143d · 4b7143d
1 parent de2fe99
commit 4b7143d
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 12 deletions.
diff --git a/.husky/lint-staged.precommit.config.js b/.husky/lint-staged.precommit.config.js
@@ -1,7 +1,7 @@
 // Runs on precommit.
 // Focuses on tests that are fast to run don't fail often. For other checks, see bin/git-run-branch-ready-checks and lint-staged.branch-ready.config.js
 module.exports = {
-  "*.{js,jsx,ts,tsx}": ["eslint --cache --fix", "stylelint --fix"],
+  "*.{js,jsx,ts,tsx}": ["eslint --cache --fix", "stylelint --fix lax"],
   "*.{md,json,scss,css}": "prettier --write",
   "*.rs": () => [
     "cargo fmt --manifest-path services/headless-lms/Cargo.toml --all -- --files-with-diff",

diff --git a/.stylelintrc b/.stylelintrc
@@ -5,6 +5,7 @@
     "no-duplicate-selectors": null,
     "function-no-unknown": null,
     "media-query-no-invalid": null,
+    "declaration-property-value-no-unknown": null,
     "selector-type-no-unknown": [
       true,
       {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -45,7 +45,7 @@
     "postcss-styled-syntax": "^0.7.0",
     "postcss-syntax": "^0.36.2",
     "prettier": "^3.4.2",
-    "stylelint": "^16.13.0",
+    "stylelint": "^16.13.1",
     "stylelint-config-recommended": "^15.0.0",
     "ts-auto-guard": "^5.0.1",
     "ts-node": "^10.9.2",

diff --git a/services/course-material/src/components/ContentRenderer/moocfi/CourseObjective/index.tsx b/services/course-material/src/components/ContentRenderer/moocfi/CourseObjective/index.tsx
@@ -32,7 +32,7 @@ const Wrapper = styled.div<WrapperProps>`
 
   h2 {
     z-index: 20;
-    width: ${({ length }) => length > 6 && "800px"};
+    ${({ length }) => length > 6 && "max-width: 800px;"}
     font-size: clamp(30px, 3.5vw, 48px);
     font-style: normal;
     font-weight: 700;