From e04050041045a894f62fbcdfbab0b579484fd86d Mon Sep 17 00:00:00 2001
From: ZhaiSoul <842607283@qq.com>
Date: Sat, 21 Mar 2026 17:53:20 +0800
Subject: [PATCH] feat: update shm calculator tips && style

---
 docs/src/components/ShmCalculator/index.jsx   | 106 ++++++++++--------
 .../ShmCalculator/styles.module.css           |  44 +-------
 2 files changed, 59 insertions(+), 91 deletions(-)

diff --git a/docs/src/components/ShmCalculator/index.jsx b/docs/src/components/ShmCalculator/index.jsx
index 11e64f17a..b7e13ed79 100644
--- a/docs/src/components/ShmCalculator/index.jsx
+++ b/docs/src/components/ShmCalculator/index.jsx
@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from "react";
+import Admonition from "@theme/Admonition";
 import styles from "./styles.module.css";
 
 const ShmCalculator = () => {
@@ -71,35 +72,56 @@ const ShmCalculator = () => {
           count
         </p>
 
-        <div className={styles.row}>
-          <div className={styles.formGroup}>
-            <label htmlFor="width" className={styles.label}>
-              Width:
-            </label>
-            <input
-              id="width"
-              type="number"
-              min="1"
-              placeholder="e.g.: 1280"
-              className={styles.input}
-              value={width}
-              onChange={(e) => setWidth(Number(e.target.value))}
-            />
+        <Admonition type="note">
+          The resolution below is the <strong>detect</strong> stream resolution,
+          not the <strong>record</strong> stream resolution. SHM size is
+          determined by the detect resolution used for object detection.{" "}
+          <a href="/frigate/camera_setup#choosing-a-detect-resolution">
+            Learn more about choosing a detect resolution.
+          </a>
+        </Admonition>
+
+        {width * height > 1280 * 720 && (
+          <Admonition type="warning">
+            Using a detect resolution higher than 720p is not recommended.
+            Higher resolutions do not improve object detection accuracy and will
+            consume significantly more resources.
+          </Admonition>
+        )}
+
+        <div className="row">
+          <div className="col col--6">
+            <div className={styles.formGroup}>
+              <label htmlFor="width" className={styles.label}>
+                Width:
+              </label>
+              <input
+                id="width"
+                type="number"
+                min="1"
+                placeholder="e.g.: 1280"
+                className={styles.input}
+                value={width}
+                onChange={(e) => setWidth(Number(e.target.value))}
+              />
+            </div>
           </div>
 
-          <div className={styles.formGroup}>
-            <label htmlFor="height" className={styles.label}>
-              Height:
-            </label>
-            <input
-              id="height"
-              type="number"
-              min="1"
-              placeholder="e.g.: 720"
-              className={styles.input}
-              value={height}
-              onChange={(e) => setHeight(Number(e.target.value))}
-            />
+          <div className="col col--6">
+            <div className={styles.formGroup}>
+              <label htmlFor="height" className={styles.label}>
+                Height:
+              </label>
+              <input
+                id="height"
+                type="number"
+                min="1"
+                placeholder="e.g.: 720"
+                className={styles.input}
+                value={height}
+                onChange={(e) => setHeight(Number(e.target.value))}
+              />
+            </div>
           </div>
         </div>
 
@@ -146,41 +168,29 @@ const ShmCalculator = () => {
           <h4>Common Presets</h4>
           <div className={styles.presetButtons}>
             <button
-              className={styles.presetButton}
+              className="button button--outline button--primary button--sm"
+              onClick={() => applyPreset(640, 360, 1)}
+            >
+              640x360 × 1
+            </button>
+            <button
+              className="button button--outline button--primary button--sm"
               onClick={() => applyPreset(1280, 720, 1)}
             >
               1280x720 × 1
             </button>
             <button
-              className={styles.presetButton}
+              className="button button--outline button--primary button--sm"
               onClick={() => applyPreset(1280, 720, 4)}
             >
               1280x720 × 4
             </button>
             <button
-              className={styles.presetButton}
+              className="button button--outline button--primary button--sm"
               onClick={() => applyPreset(1280, 720, 8)}
             >
               1280x720 × 8
             </button>
-            <button
-              className={styles.presetButton}
-              onClick={() => applyPreset(1920, 1080, 1)}
-            >
-              1920x1080 × 1
-            </button>
-            <button
-              className={styles.presetButton}
-              onClick={() => applyPreset(1920, 1080, 4)}
-            >
-              1920x1080 × 4
-            </button>
-            <button
-              className={styles.presetButton}
-              onClick={() => applyPreset(3840, 2160, 1)}
-            >
-              4K × 1
-            </button>
           </div>
         </div>
       </div>
diff --git a/docs/src/components/ShmCalculator/styles.module.css b/docs/src/components/ShmCalculator/styles.module.css
index 2afbbdceb..5b48f4942 100644
--- a/docs/src/components/ShmCalculator/styles.module.css
+++ b/docs/src/components/ShmCalculator/styles.module.css
@@ -30,17 +30,7 @@
 }
 
 .formGroup {
-  margin-bottom: 0.5rem;
-}
-
-.row {
-  display: flex;
-  gap: 1rem;
-  margin-bottom: 0.5rem;
-}
-
-.row .formGroup {
-  flex: 1;
+  margin-bottom: 1rem;
 }
 
 .label {
@@ -139,35 +129,3 @@
   flex-wrap: wrap;
   gap: 0.5rem;
 }
-
-.presetButton {
-  padding: 0.5rem 1rem;
-  background: var(--ifm-background-surface-color);
-  border: 1px solid var(--ifm-border-color);
-  border-radius: 6px;
-  color: var(--ifm-font-color-base);
-  cursor: pointer;
-  font-size: 0.85rem;
-  font-weight: var(--ifm-font-weight-normal);
-  transition: all 0.2s;
-}
-
-[data-theme='light'] .presetButton {
-  background: #fff;
-  border: 1px solid #d0d7de;
-}
-
-[data-theme='dark'] .presetButton {
-  background: #24292f;
-  border: 1px solid #3b434b;
-}
-
-.presetButton:hover {
-  background: var(--ifm-color-primary);
-  color: #fff;
-  border-color: var(--ifm-color-primary);
-}
-
-.presetButton:active {
-  transform: translateY(1px);
-}