Skip to content

Make frontend responsive across mobile, tablet, and desktop viewports #11

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Copilot wants to merge 2 commits into
base: main
Choose a base branch
from
+36 −36
Open

Make frontend responsive across mobile, tablet, and desktop viewports #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6573137
Initial plan
Copilot Mar 3, 2026
d35e7dc
Improve responsive design for mobile, tablet, and narrow views
Copilot Mar 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 26 additions & 26 deletions frontend/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,44 +70,44 @@ function App() {
};

return (
<div className="min-h-screen bg-purple-50 py-12 px-4 sm:px-6 lg:px-8">
<div className="min-h-screen bg-purple-50 py-6 sm:py-12 px-3 sm:px-4 md:px-6 lg:px-8">
<div className="max-w-7xl mx-auto">
{/* Navbar */}
<div className="flex justify-between items-center px-8 py-6 mb-8 bg-white backdrop-blur-sm rounded-2xl border border-purple-100 shadow-lg">
<div className="text-2xl font-bold bg-gradient-to-r from-pink-600 to-purple-800 text-transparent bg-clip-text font-sans">
<div className="flex flex-col sm:flex-row justify-between items-center gap-2 sm:gap-4 px-4 sm:px-8 py-4 sm:py-6 mb-6 sm:mb-8 bg-white backdrop-blur-sm rounded-2xl border border-purple-100 shadow-lg">
<div className="text-xl sm:text-2xl font-bold bg-gradient-to-r from-pink-600 to-purple-800 text-transparent bg-clip-text font-sans">
mɪˈʃɛl
</div>
<div className="flex items-center gap-4">
<div className="text-sm font-medium text-gray-600">{copyrightText}</div>
<div className="text-xs sm:text-sm font-medium text-gray-600 text-center">{copyrightText}</div>
</div>
</div>

<div className="flex flex-col lg:flex-row gap-8">
{/* Input Section */}
<div className="lg:w-1/2">
<div className="bg-white backdrop-blur-sm shadow-xl rounded-3xl p-8 border border-purple-100 hover:shadow-2xl hover:scale-[1.02] transition-all duration-300">
<div className="text-center mb-8">
<div className="bg-white backdrop-blur-sm shadow-xl rounded-3xl p-4 sm:p-8 border border-purple-100 hover:shadow-2xl hover:scale-[1.02] transition-all duration-300">
<div className="text-center mb-6 sm:mb-8">

<h1 className="text-4xl font-bold bg-gradient-to-r from-pink-600 to-purple-800 text-transparent bg-clip-text mb-4 font-sans">
<h1 className="text-3xl sm:text-4xl font-bold bg-gradient-to-r from-pink-600 to-purple-800 text-transparent bg-clip-text mb-4 font-sans">
Wikipedia Path Finder
</h1>
<div className="mt-5">
<p className="text-md text-gray-600 font-normal px-3 py-1.5 border-2 border-purple-100 rounded-lg inline-block shadow-sm hover:shadow-md transition-all duration-200">University of Pennsylvania • Michelle Chang (장민지)</p>
<div className="mt-4 sm:mt-5">
<p className="text-sm sm:text-md text-gray-600 font-normal px-2 sm:px-3 py-1.5 border-2 border-purple-100 rounded-lg inline-block shadow-sm hover:shadow-md transition-all duration-200">University of Pennsylvania • Michelle Chang (장민지)</p>
</div>
<div className="mt-4">
<p className="text-lg text-gray-700 font-normal font-sans">
<p className="text-base sm:text-lg text-gray-700 font-normal font-sans">
Discover the shortest path between Wikipedia articles
</p>
</div>

<div className="mt-8 mb-8">
<div className="mt-6 sm:mt-8 mb-6 sm:mb-8">
<div className="h-px bg-gradient-to-r from-transparent via-purple-200 to-transparent"></div>
</div>
</div>

<div className="space-y-6">
<div className="space-y-4 sm:space-y-6">
<div className="group relative">
<label htmlFor="startingLink" className="block text-sm font-normal text-gray-700 mb-3 group-hover:text-pink-600 transition-colors duration-200">
<label htmlFor="startingLink" className="block text-xs sm:text-sm font-normal text-gray-700 mb-2 sm:mb-3 group-hover:text-pink-600 transition-colors duration-200">
Starting Article Topic (Case Sensitive, include Spaces)
</label>
<input
Expand All @@ -116,7 +116,7 @@ function App() {
value={startingLink}
onChange={(e) => setStartingLink(e.target.value)}
placeholder="e.g. South Korea"
className="mt-1 block w-full px-5 py-4 border-2 border-purple-100 rounded-xl focus:ring-2 focus:ring-purple-800 focus:border-purple-800 bg-white/70 shadow-sm placeholder:text-gray-400 transition-all duration-200 group-hover:bg-white/90"
className="mt-1 block w-full px-4 sm:px-5 py-3 sm:py-4 text-sm sm:text-base border-2 border-purple-100 rounded-xl focus:ring-2 focus:ring-purple-800 focus:border-purple-800 bg-white/70 shadow-sm placeholder:text-gray-400 transition-all duration-200 group-hover:bg-white/90"
/>
<div className="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity duration-200 mt-8">
<svg className="h-5 w-5 text-pink-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
Expand All @@ -126,7 +126,7 @@ function App() {
</div>

<div className="group relative">
<label htmlFor="endingLink" className="block text-sm font-normal text-gray-700 mb-3 group-hover:text-pink-600 transition-colors duration-200">
<label htmlFor="endingLink" className="block text-xs sm:text-sm font-normal text-gray-700 mb-2 sm:mb-3 group-hover:text-pink-600 transition-colors duration-200">
Target Article Topic (Case Sensitive, include Spaces)
</label>
<input
Expand All @@ -135,7 +135,7 @@ function App() {
value={endingLink}
onChange={(e) => setEndingLink(e.target.value)}
placeholder="e.g. Hangul"
className="mt-1 block w-full px-5 py-4 border-2 border-purple-100 rounded-xl focus:ring-2 focus:ring-purple-800 focus:border-purple-800 bg-white/70 shadow-sm placeholder:text-gray-400 transition-all duration-200 group-hover:bg-white/90"
className="mt-1 block w-full px-4 sm:px-5 py-3 sm:py-4 text-sm sm:text-base border-2 border-purple-100 rounded-xl focus:ring-2 focus:ring-purple-800 focus:border-purple-800 bg-white/70 shadow-sm placeholder:text-gray-400 transition-all duration-200 group-hover:bg-white/90"
/>
<div className="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity duration-200 mt-8">
<svg className="h-5 w-5 text-pink-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
Expand All @@ -144,25 +144,25 @@ function App() {
</div>
</div>

<div className="mt-6 p-6 bg-white rounded-xl border border-purple-100 shadow-md hover:shadow-lg transition-all duration-300">
<h3 className="text-lg font-semibold bg-gradient-to-r from-pink-600 to-purple-800 text-transparent bg-clip-text mb-3">How it Works</h3>
<p className="text-sm leading-relaxed text-gray-700 font-normal mb-4 font-sans">
<div className="mt-4 sm:mt-6 p-4 sm:p-6 bg-white rounded-xl border border-purple-100 shadow-md hover:shadow-lg transition-all duration-300">
<h3 className="text-base sm:text-lg font-semibold bg-gradient-to-r from-pink-600 to-purple-800 text-transparent bg-clip-text mb-2 sm:mb-3">How it Works</h3>
<p className="text-xs sm:text-sm leading-relaxed text-gray-700 font-normal mb-3 sm:mb-4 font-sans">
This tool uses Breadth-First Search (BFS) to find the shortest path between Wikipedia articles.
BFS explores the web of connections level by level, ensuring the discovered path has the minimum
number of clicks needed to reach the target article.
</p>
<div className="mt-3 flex items-center space-x-2 text-sm font-normal text-gray-600">
<svg className="w-5 h-5 text-pink-600" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<div className="mt-3 flex items-center space-x-2 text-xs sm:text-sm font-normal text-gray-600">
<svg className="w-4 h-4 sm:w-5 sm:h-5 text-pink-600 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2h-1V9z" clipRule="evenodd"></path>
</svg>
<span className="text-sm font-normal text-gray-600">Search is limited to 1000 nodes to ensure quick results</span>
<span className="text-xs sm:text-sm font-normal text-gray-600">Search is limited to 1000 nodes to ensure quick results</span>
</div>
</div>

<button
onClick={handleQuery}
disabled={!startingLink || !endingLink || isLoading}
className="w-full mt-6 py-3.5 px-4 bg-gradient-to-r from-pink-600 to-purple-800 text-white font-medium rounded-xl hover:from-pink-700 hover:to-purple-900 transform hover:scale-[1.02] transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 shadow-lg disabled:opacity-70 disabled:cursor-not-allowed disabled:transform-none"
className="w-full mt-4 sm:mt-6 py-3 sm:py-3.5 px-4 text-sm sm:text-base bg-gradient-to-r from-pink-600 to-purple-800 text-white font-medium rounded-xl hover:from-pink-700 hover:to-purple-900 transform hover:scale-[1.02] transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 shadow-lg disabled:opacity-70 disabled:cursor-not-allowed disabled:transform-none"
>
{isLoading ? (
<span className="flex items-center justify-center">
Expand All @@ -183,10 +183,10 @@ function App() {
{/* Results Section */}
<div className="lg:w-1/2">
{(isLoading || results.length > 0) && (
<div className="bg-gradient-to-br from-white/95 via-white/90 to-purple-50/90 backdrop-blur-sm shadow-xl rounded-3xl p-8 border border-purple-100 hover:shadow-2xl hover:scale-[1.02] transition-all duration-300">
<div className="bg-gradient-to-br from-white/95 via-white/90 to-purple-50/90 backdrop-blur-sm shadow-xl rounded-3xl p-4 sm:p-8 border border-purple-100 hover:shadow-2xl hover:scale-[1.02] transition-all duration-300">
{isLoading ? (
<div className="text-center">
<p className="text-xl font-semibold bg-gradient-to-r from-pink-600 to-pink-800 text-transparent bg-clip-text">
<p className="text-lg sm:text-xl font-semibold bg-gradient-to-r from-pink-600 to-pink-800 text-transparent bg-clip-text">
Exploring Wikipedia using BFS...
</p>
<div className="mt-6 flex justify-center">
Expand All @@ -196,7 +196,7 @@ function App() {
) : (
<>
{nodesExplored > 0 && (
<div className="mb-4 text-sm font-medium bg-gradient-to-r from-pink-600 to-purple-800 text-transparent bg-clip-text">
<div className="mb-4 text-xs sm:text-sm font-medium bg-gradient-to-r from-pink-600 to-purple-800 text-transparent bg-clip-text">
BFS explored {nodesExplored} nodes to find this path
</div>
)}
Expand Down
20 changes: 10 additions & 10 deletions frontend/src/components/ResultsList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,34 +4,34 @@ interface ResultsListProps {

export const ResultsList = ({ results }: ResultsListProps) => {
return (
<div className="space-y-4">
<div className="mb-6">
<h2 className="text-2xl font-semibold bg-gradient-to-r from-pink-600 to-purple-800 text-transparent bg-clip-text mb-2 font-sans">Path Results</h2>
<p className="text-sm text-gray-600 font-normal font-sans">
<div className="space-y-3 sm:space-y-4">
<div className="mb-4 sm:mb-6">
<h2 className="text-xl sm:text-2xl font-semibold bg-gradient-to-r from-pink-600 to-purple-800 text-transparent bg-clip-text mb-2 font-sans">Path Results</h2>
<p className="text-xs sm:text-sm text-gray-600 font-normal font-sans">
Click on any article to open it in Wikipedia. Hover over links to preview the destination.
</p>
</div>
{results.map((res, index) => (
<div
key={index}
className="bg-white backdrop-blur-sm border border-blue-100 rounded-xl p-4 hover:border-blue-300 transition-all duration-200 transform hover:scale-[1.02] hover:shadow-lg"
className="bg-white backdrop-blur-sm border border-blue-100 rounded-xl p-3 sm:p-4 hover:border-blue-300 transition-all duration-200 transform hover:scale-[1.02] hover:shadow-lg"
title={`Click to visit: ${res.split('/wiki/').pop()?.replace(/_/g, ' ')}`}
>
<div className="flex items-center space-x-4">
<span className="flex-shrink-0 h-8 w-8 rounded-lg bg-gradient-to-r from-pink-600 to-purple-800 flex items-center justify-center text-white font-medium shadow-md">
<div className="flex items-center space-x-3 sm:space-x-4">
<span className="flex-shrink-0 h-7 w-7 sm:h-8 sm:w-8 rounded-lg bg-gradient-to-r from-pink-600 to-purple-800 flex items-center justify-center text-white text-sm sm:text-base font-medium shadow-md">
{index + 1}
</span>
<a
href={res}
target="_blank"
rel="noopener noreferrer"
className="group flex items-center space-x-2 text-pink-600 hover:text-purple-800 truncate transition-colors"
className="group flex items-center space-x-2 text-pink-600 hover:text-purple-800 min-w-0 flex-1 transition-colors"
>
<span className="group-hover:underline font-normal">
<span className="group-hover:underline font-normal text-sm sm:text-base break-words">
{res.split('/wiki/').pop()?.replace(/_/g, ' ')}
</span>
<svg
className="w-4 h-4 opacity-0 group-hover:opacity-100 transition-all duration-200"
className="w-3 h-3 sm:w-4 sm:h-4 flex-shrink-0 opacity-0 group-hover:opacity-100 transition-all duration-200"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
Expand Down
Loading