Move mobile menu styles to component-specific CSS file

[Copilot]

Mobile responsive styles for Ant Design Menu were incorrectly placed in src/index.css (global styles) instead of being co-located with the NoteLayout component that uses them.

Changes

• Moved mobile menu media query from src/index.css → src/common/layouts/NoteLayout.css
  • Targets .ant-menu-item, .ant-menu-submenu-title with larger touch targets (48px height)
  • Submenu items use 44px height for proper mobile spacing
• Cleaned src/index.css to contain only root-level styles (fonts, body, color scheme)

Rationale

index.css should contain only global styles. Component-specific responsive overrides belong with the component using them (NoteLayout.jsx uses the Menu component).

Before (incorrect location)

/* src/index.css */
@media (max-width: 768px) {
  /* TODO make this into correct file */
  .ant-menu-item,
  .ant-menu-submenu-title {
    font-size: 16px !important;
    line-height: 48px !important;
    height: 48px !important;
    padding: 0 24px !important;
  }
}

After (correct location)

/* src/common/layouts/NoteLayout.css */
@media (max-width: 768px) {
  .ant-menu-item,
  .ant-menu-submenu-title {
    font-size: 16px !important;
    line-height: 48px !important;
    height: 48px !important;
    padding: 0 24px !important;
  }
}

Visual Verification

Mobile menu functionality unchanged:

Original prompt

---

This section details on the original issue you should resolve

<issue_title>css restructure</issue_title>
<issue_description>

I think this should not in src/idnex.css. </issue_description>

<agent_instructions>如果你是架构师，你会把这些 css 放到哪里？按照架构师的思维去维护更新这个 css 的位置</agent_instructions>

Comments on the Issue (you are @copilot in this section)

• Fixes css restructure #56

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.