Improve responsive search and detail (#153)

* fix: responsive search xs

* fix: responsive detail xs

* fix: add prettier cache

* fix: remove unused classes

* fix: code cleanup

.husky/pre-commit

@@ -2,4 +2,4 @@
 echo "[Husky] Running lint check:"
 npm run lint
 echo "[Husky] Running prettier check:"
-npx prettier -c .
+npx prettier --cache -c .

package.json

@@ -12,7 +12,7 @@
   },
   "scripts": {
     "build": "ng build",
-    "clean": "npm cache clean --force && ng cache clean && rm .eslintcache",
+    "clean": "npm cache clean --force && ng cache clean && rm -f .eslintcache && rm -f ./node_modules/.cache/prettier/.prettier-cache",
     "start": "ng serve --configuration=development --proxy-config=proxy.conf.js",
     "prepare": "husky",
     "lint": "ng lint --cache=true",
@@ -88,14 +88,14 @@
     "@schematics/angular": "^18.1.2",
     "@storybook/addon-essentials": "8.2.7",
     "@storybook/angular": "8.2.7",
-    "@storybook/core-server": "8.2.6",
+    "@storybook/core-server": "8.2.7",
     "@svgr/webpack": "^8.1.0",
     "@swc-node/register": "^1.10.9",
     "@swc/cli": "~0.4.0",
-    "@swc/core": "^1.7.3",
+    "@swc/core": "^1.7.5",
     "@swc/helpers": "0.5.12",
     "@types/jasmine": "~5.1.4",
-    "@types/node": "22.0.2",
+    "@types/node": "22.1.0",
     "@typescript-eslint/eslint-plugin": "7.18.0",
     "@typescript-eslint/parser": "7.18.0",
     "css-loader": "^7.1.2",
@@ -114,7 +114,7 @@
     "karma-jasmine": "^5.1.0",
     "karma-jasmine-html-reporter": "^2.1.0",
     "karma-sonarqube-unit-reporter": "^0.0.23",
-    "msw": "^2.3.4",
+    "msw": "^2.3.5",
     "msw-storybook-addon": "^2.0.3",
     "ng-packagr": "18.1.0",
     "ngx-build-plus": "^18.0.0",

src/_mixins.scss

@@ -268,3 +268,33 @@
     }
   }
 }
+
+@mixin displaying-text-responsive {
+  :host ::ng-deep {
+    .text-responsive {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+}
+
+@mixin media-queries {
+  :host ::ng-deep {
+    @media screen and (min-width: 768px) {
+      .md\:h-2-5rem {
+        height: 2.5rem !important;
+      }
+      .md\:h-3-5rem {
+        height: 3.5rem !important;
+      }
+    }
+    @media screen and (min-width: 576px) {
+      .card-badge-right {
+        &.sm\:badge-2-2 {
+          top: 33px !important;
+        }
+      }
+    }
+  }
+}