Merge pull request #5 from ashishjha-96/mobile-friendly

CSS Update

Author: ajha-dev

frontend/src/components/Editor.tsx

@@ -392,6 +392,7 @@ export function Editor({ docId }: EditorProps) {
       >
         {/* Header */}
         <div
+          className="mobile-header"
           style={{
             backgroundColor: "var(--header-bg)",
             borderBottom: "1px solid var(--header-border)",
@@ -400,16 +401,20 @@ export function Editor({ docId }: EditorProps) {
           }}
         >
           <div
+            className="mobile-header-content"
             style={{
               maxWidth: "1200px",
               margin: "0 auto",
               display: "flex",
               justifyContent: "space-between",
               alignItems: "center",
+              flexWrap: "wrap",
+              gap: "12px",
             }}
           >
             <div>
               <h1
+                className="mobile-logo"
                 style={{
                   display: "flex",
                   alignItems: "center",
@@ -419,9 +424,9 @@ export function Editor({ docId }: EditorProps) {
                   color: "var(--page-text)",
                 }}
               >
-                <span style={{ fontWeight: 800, fontSize:"28px", color: "#646cff"}}>[</span>
+                <span className="mobile-logo-bracket" style={{ fontWeight: 800, fontSize:"28px", color: "#646cff"}}>[</span>
                 <span>MarkDoc </span>
-                <span style={{ fontWeight: 800, fontSize:"28px", color: "#646cff"}}>]</span>
+                <span className="mobile-logo-bracket" style={{ fontWeight: 800, fontSize:"28px", color: "#646cff"}}>]</span>
               </h1>
               <p
                 style={{
@@ -430,21 +435,23 @@ export function Editor({ docId }: EditorProps) {
                   fontSize: "13px"
                 }}
               >
-                Document:{" "}
-                <code
-                  style={{
-                    background: mode === "dark" ? "#21262d" : "#f5f5f5",
-                    padding: "2px 6px",
-                    borderRadius: "3px",
-                    fontSize: "12px",
-                    color: mode === "dark" ? "#e6edf3" : "#24292f",
-                  }}
-                >
-                  {docId}
-                </code>
+                <span className="mobile-hide">
+                  Document:{" "}
+                  <code
+                    style={{
+                      background: mode === "dark" ? "#21262d" : "#f5f5f5",
+                      padding: "2px 6px",
+                      borderRadius: "3px",
+                      fontSize: "12px",
+                      color: mode === "dark" ? "#e6edf3" : "#24292f",
+                    }}
+                  >
+                    {docId}
+                  </code>
+                  {" · "}
+                </span>
                 {userInfo && (
                   <>
-                    {" · "}
                     Logged in as:{" "}
                     <span style={{ fontWeight: 500 }}>{userInfo.name}</span>
                   </>
@@ -453,6 +460,7 @@ export function Editor({ docId }: EditorProps) {
             </div>
 
             <div
+              className="mobile-header-actions"
               style={{
                 display: "flex",
                 alignItems: "center",
@@ -483,6 +491,7 @@ export function Editor({ docId }: EditorProps) {
 
         {/* Editor Container */}
         <div
+          className="mobile-editor-container editor-wrapper"
           style={{
             maxWidth: "1200px",
             margin: "0 auto",

frontend/src/components/ExportMenu.tsx

@@ -145,6 +145,7 @@ export function ExportMenu({ editor, docId, onNewDocument, yDoc }: ExportMenuPro
 
           {/* Menu Content */}
           <div
+            className="mobile-dropdown"
             style={{
               position: "absolute",
               top: "calc(100% + 8px)",

frontend/src/components/KeyboardShortcutsMenu.tsx

@@ -129,6 +129,7 @@ export function KeyboardShortcutsMenu() {
 
         {/* Content - Compact Grid */}
         <div
+          className="mobile-shortcuts-grid"
           style={{
             padding: "20px",
             display: "grid",

frontend/src/components/Landing.tsx

@@ -46,6 +46,7 @@ export function Landing() {
       }}
     >
       <div
+        className="mobile-modal"
         style={{
           backgroundColor: "white",
           borderRadius: "12px",

frontend/src/components/NamePrompt.tsx

@@ -35,6 +35,7 @@ export function NamePrompt({ onSubmit, docId }: NamePromptProps) {
       }}
     >
       <div
+        className="mobile-modal"
         style={{
           backgroundColor: "white",
           borderRadius: "12px",

frontend/src/components/SearchBar.tsx

@@ -224,6 +224,7 @@ export function SearchBar({ editor }: SearchBarProps) {
     <>
       {/* Main search bar */}
       <div
+        className="mobile-search-bar"
         style={{
           position: "fixed",
           top: "80px",
@@ -234,7 +235,7 @@ export function SearchBar({ editor }: SearchBarProps) {
           border: `2px solid ${mode === "dark" ? "#30363d" : "#e0e0e0"}`,
           borderRadius: "8px",
           boxShadow: "0 8px 24px rgba(0, 0, 0, 0.2)",
-          minWidth: "500px",
+          width: "90%",
           maxWidth: "700px",
           animation: "slideDown 0.2s ease-out",
         }}
@@ -347,6 +348,7 @@ export function SearchBar({ editor }: SearchBarProps) {
         {/* Results list */}
         {results.length > 0 && searchQuery && (
           <div
+            className="mobile-search-results"
             style={{
               maxHeight: "400px",
               overflowY: "auto",

frontend/src/components/UserPresence.tsx

@@ -50,6 +50,7 @@ export function UserPresence({ channel }: UserPresenceProps) {
       {overflowCount > 0 && (
         <div style={{ position: "relative", marginLeft: "4px" }}>
           <div
+            className="mobile-avatar-overflow"
             onClick={() => setShowOverflow(!showOverflow)}
             style={{
               width: "36px",
@@ -206,6 +207,7 @@ function UserAvatar({
       }}
     >
       <div
+        className="mobile-avatar"
         style={{
           width: "36px",
           height: "36px",