Initial commit of grid line function

src/taskpane/components/App.tsx

@@ -9,6 +9,7 @@ import ConfidentialButtons from "./ConfidentialButtons";
 import DraftButtons from "./DraftButtons";
 import ProgressBarButtons from "./ProgressBarButtons";
 import AlignmentButtons from "./AlignmentButtons";
+import GridGuidelineManager from "./GridGuidelineManager";
 import { makeStyles, Text, Subtitle1, tokens, Theme, Spinner } from "@fluentui/react-components";
 import { ShapeUnionRegular, SquareRegular, InfoRegular } from "@fluentui/react-icons";
 
@@ -46,6 +47,7 @@ const useStyles = makeStyles({
     fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
     backgroundColor: tokens.colorNeutralBackground1,
     overflow: "auto",
+    maxHeight: "100vh",
   },
   statusContainer: {
     marginTop: "4px",
@@ -194,6 +196,13 @@ const App: React.FC<AppProps> = () => {
           <AlignmentButtons />
         </div>
         
+        <div className={styles.section}>
+          <Subtitle1 block className={styles.sectionTitle}>
+            Grid & Guidelines
+          </Subtitle1>
+          <GridGuidelineManager />
+        </div>
+        
         {/* Status message area at the bottom */}
         {isProcessing && (
           <div className={styles.statusContainer}>