feat: make upload dropzones mobile-friendly

[HarshMN2345]

What does this PR do?

functions sites manual page

Test Plan

Related PRs and Issues

(If this PR is related to any other PR or resolves any issue or related to any issue link all related PR and issues here.)

Have you read the Contributing Guidelines on issues?

yes

Summary by CodeRabbit

• Style
  • Improved layout and alignment of drag-and-drop upload prompts in function and site creation flows for centered, inline presentation.
  • Integrated file-format restriction tooltips directly with info icons, using inline alignment to keep tooltip text visually connected and vertically aligned with prompts.

[railway-app]

This PR was not deployed automatically as @HarshMN2345 does not have access to the Railway project.

In order to get automatic PR deploys, please add @HarshMN2345 to your workspace on Railway.

[appwrite]

Console

Project ID: 688b7bf400350cbd60e9

Sites (2)

Site	Status	Logs	Preview	QR
console-stage 688b7cf6003b1842c9dc	Queued	View Logs	Preview URL
console-cloud 688b7c18002b9b871a8f	Ready	View Logs	Preview URL

Tip

Appwrite has a Discord community with over 16 000 members.

[coderabbitai]

Caution

Review failed

The head commit changed during the review from ae6c3a6 to c85f5fd.

Walkthrough

Two Svelte pages that render file upload dropzones were refactored for presentation only. Multi-line Stack blocks were replaced with inline, horizontally centered Stacks; instruction text and file-size captions were centered via Typography props. The Tooltip was moved to wrap the info Icon directly and its content is now supplied via a svelte:fragment slot. Inline-flex containers were added to keep the Icon/Tooltip pair inline and vertically aligned. No exported APIs or functional behavior were changed.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The pull request title "feat: make upload dropzones mobile-friendly" is clearly related to the main changes in the changeset. The modifications target two upload/drag-and-drop components, restructuring their layouts by replacing nested multi-line blocks with inline, horizontally-centered stacks, adjusting display properties to use inline-flex, and centering text alignment. These layout and styling adjustments—using inline display, inline-flex containers, and center alignment—are standard responsive design techniques that improve mobile usability by optimizing how components flow and display on smaller screens. The title accurately conveys the primary purpose and intent of the changes without being vague or overly broad.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/routes/(console)/project-[region]-[project]/sites/create-site/manual/+page.svelte (1)

194-196: Missing center alignment on caption.

The caption should be center-aligned to match the centered dropzone layout and maintain consistency with the functions file (line 205).

Apply this diff:

-<Typography.Caption variant="400"
+<Typography.Caption variant="400" align="center"
     >Max file size: {readableMaxSize.value +
         readableMaxSize.unit}</Typography.Caption>

🧹 Nitpick comments (1)

src/routes/(console)/project-[region]-[project]/functions/create-function/manual/+page.svelte (1)

188-203: Verify mobile responsiveness and consider extracting shared component.

The centered layout improves visual consistency. However, the PR title claims to make dropzones "mobile-friendly," yet the changes primarily center content without introducing mobile-specific responsive features like:

• Touch-friendly target sizes
• Responsive breakpoints or media queries
• Mobile-optimized spacing/padding
• Viewport-based sizing

Additionally, this dropzone layout is now duplicated between sites and functions. Consider extracting it into a shared component to reduce duplication and ensure consistency.

Can you verify that these changes meaningfully improve mobile usability through manual testing on actual mobile devices? Also, would you like assistance creating a shared dropzone component to eliminate the duplication?

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 1590206 and f5acd16.

📒 Files selected for processing (2)

• src/routes/(console)/project-[region]-[project]/functions/create-function/manual/+page.svelte (1 hunks)
• src/routes/(console)/project-[region]-[project]/sites/create-site/manual/+page.svelte (1 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

• GitHub Check: build
• GitHub Check: e2e

🔇 Additional comments (1)

src/routes/(console)/project-[region]-[project]/functions/create-function/manual/+page.svelte (1)

205-208: Good: Caption is properly centered.

The caption alignment correctly matches the centered dropzone layout.

[ItzNotABug]

does just inline not work? what about the alignItems="center" as well for vertical-align?

[ItzNotABug]

same as above + how inline start here and not on the other one above?