opportunity-hack · gregv · Mar 14, 2026 · Mar 14, 2026 · Mar 14, 2026 · Mar 14, 2026
diff --git a/src/components/Profile/GitHubContribution.js b/src/components/Profile/GitHubContribution.js
@@ -70,34 +70,34 @@ const GitHubContributions = ({ githubHistory }) => {
   });
 
   return (
-    <Paper elevation={3} sx={{ p: 3, mt: 3, mb: 3 }}>
-      <Typography variant="h5" gutterBottom display="flex" alignItems="center">
-        <GitHub sx={{ mr: 1 }} />
+    <Paper elevation={3} sx={{ p: { xs: 2, sm: 3 }, mt: 3, mb: 3 }}>
+      <Typography variant="h5" gutterBottom display="flex" alignItems="center" sx={{ wordBreak: 'break-word', fontSize: { xs: '1.2rem', sm: '1.5rem' } }}>
+        <GitHub sx={{ mr: 1, flexShrink: 0 }} />
         GitHub Contributions for @<strong>{githubHistory[0].login}</strong>
       </Typography>
       <Grid container spacing={2} sx={{ mb: 2 }}>
-        <Grid size={{ xs: 12, sm: 6, md: 3 }}>
+        <Grid size={{ xs: 6, sm: 6, md: 3 }}>
           <Chip
             icon={<Code />}
             label={`${totalCommits} Commits`}
             color="primary"
           />
         </Grid>
-        <Grid size={{ xs: 12, sm: 6, md: 3 }}>
+        <Grid size={{ xs: 6, sm: 6, md: 3 }}>
           <Chip
             icon={<MergeType />}
             label={`${totalPRs} Pull Requests`}
             color="secondary"
           />
         </Grid>
-        <Grid size={{ xs: 12, sm: 6, md: 3 }}>
+        <Grid size={{ xs: 6, sm: 6, md: 3 }}>
           <Chip
             icon={<BugReport />}
             label={`${totalIssues} Issues`}
             color="info"
           />
         </Grid>
-        <Grid size={{ xs: 12, sm: 6, md: 3 }}>
+        <Grid size={{ xs: 6, sm: 6, md: 3 }}>
           <Chip
             icon={<RateReview />}
             label={`${totalReviews} Reviews`}

diff --git a/src/components/Profile/Profile.js b/src/components/Profile/Profile.js
@@ -544,13 +544,13 @@ export default function Profile(props) {
 
   return (
     <LayoutContainer container>
-      <InnerContainer container sx={{ maxWidth: '100%', overflowX: 'hidden' }}>
+      <InnerContainer container>
         <Head>
           <title>Profile - Opportunity Hack Developer Portal</title>
         </Head>
 
         {isLoggedIn ? (
-          <ProfileContainer sx={{ width: '100%', maxWidth: '100%', px: isMobile ? 2 : 4 }}>
+          <ProfileContainer sx={{ width: '100%', px: { xs: 1, sm: 2, md: 4 } }}>
             {/* Header Section */}
             <Paper elevation={3} sx={{ p: { xs: 2, sm: 3 }, mb: 4, borderRadius: 2 }}>
               {isLoading ? (
@@ -687,7 +687,7 @@ export default function Profile(props) {
                 </Tabs>
               </Box>
 
-              <Box sx={{ p: { xs: 2, sm: 3 } }}>
+              <Box sx={{ p: { xs: 1, sm: 3 }, overflow: 'hidden' }}>
                 {/* Basic Information Tab */}
                 <TabPanel value={activeTab} index={0}>
                   <Typography variant="h4" sx={{ mb: 3, fontWeight: 500, fontSize: { xs: '1.4rem', sm: '2.125rem' } }}>
@@ -697,7 +697,7 @@ export default function Profile(props) {
                     Tell us more about yourself and why you're here with Opportunity Hack.
                   </Typography>
 
-                  <Grid container spacing={3}>
+                  <Grid container spacing={{ xs: 2, sm: 3 }}>
                     <Grid size={{ xs: 12, sm: 6, md: 4 }}>
                       {isLoading ? (
                         <Skeleton variant="rectangular" height={56} />
@@ -866,7 +866,7 @@ export default function Profile(props) {
                     Your Impact & Achievements
                   </Typography>
 
-                  <Grid container spacing={4}>
+                  <Grid container spacing={{ xs: 2, sm: 4 }}>
                     <Grid size={{ xs: 12, md: 6 }}>
                       {isLoading ? (
                         <Skeleton variant="rectangular" height={180} />
@@ -930,7 +930,7 @@ export default function Profile(props) {
                     We occasionally send swag to our active members. Please provide your shipping details if you'd like to receive some OHack goodies!
                   </Typography>
 
-                  <Grid container spacing={3}>
+                  <Grid container spacing={{ xs: 2, sm: 3 }}>
                     <Grid size={{ xs: 12, sm: 6, md: 4 }}>
                       {isLoading ? (
                         <Skeleton variant="rectangular" height={56} />
@@ -965,7 +965,7 @@ export default function Profile(props) {
                     Shipping Address
                   </Typography>
 
-                  <Grid container spacing={3}>
+                  <Grid container spacing={{ xs: 2, sm: 3 }}>
                     <Grid size={{ xs: 12 }}>
                       <FormControl fullWidth>
                         <TextField

diff --git a/src/components/Profile/PublicProfile.js b/src/components/Profile/PublicProfile.js
@@ -250,7 +250,7 @@ const PublicProfile = () => {
                 Basic Information
               </Typography>
 
-              <Grid container spacing={3}>
+              <Grid container spacing={{ xs: 2, sm: 3 }}>
                 {/* GitHub Username */}
                 <Grid size={{ xs: 12, sm: 6 }}>
                   <Typography

diff --git a/src/components/Profile/RaffleEntries.js b/src/components/Profile/RaffleEntries.js
@@ -128,7 +128,7 @@ const RaffleEntries = ({ profile, githubHistory }) => {
   const mostRecentEntry = giveawayEntries[0];
 
   return (
-    <Paper elevation={3} sx={{ p: 3, mt: 3, mb: 3 }}>
+    <Paper elevation={3} sx={{ p: { xs: 2, sm: 3 }, mt: 3, mb: 3 }}>
       <Typography variant="h5" gutterBottom display="flex" alignItems="center">
         <EmojiEvents sx={{ mr: 1 }} color="primary" />
         Giveaway Entries

diff --git a/src/components/Profile/ShareableGitHubContributions.js b/src/components/Profile/ShareableGitHubContributions.js
@@ -70,7 +70,7 @@ const ShareableGitHubContributions = ({ githubHistory, userName }) => {
     <Box sx={{ mt: 3, mb: 3 }}>
       <Paper
         elevation={3}
-        sx={{ p: 3, backgroundColor: "#f5f5f5" }}
+        sx={{ p: { xs: 2, sm: 3 }, backgroundColor: "#f5f5f5" }}
         ref={shareableRef}
       >
         <Box
@@ -133,7 +133,7 @@ const ShareableGitHubContributions = ({ githubHistory, userName }) => {
           <AlertTitle>
             Repositories Contributed To ({uniqueRepos.length})
           </AlertTitle>
-          <Typography variant="body2">{uniqueRepos.join(", ")}</Typography>
+          <Typography variant="body2" sx={{ wordBreak: 'break-word' }}>{uniqueRepos.join(", ")}</Typography>
         </Alert>
       </Paper>
       <Box display="flex" justifyContent="center" mt={2}>

diff --git a/src/components/feedback-lite.js b/src/components/feedback-lite.js
@@ -57,14 +57,20 @@ export default function FeedbackLite ( {feedback_url, history} ){
 
     const MAX_HEARTS = 10;
 
-    const StyledRating = styled(Rating)({
+    const StyledRating = styled(Rating)(({ theme }) => ({
         '& .MuiRating-iconFilled': {
             color: '#ff6d75',
         },
         '& .MuiRating-iconHover': {
             color: '#ff3d47',
         },
-    });
+        flexWrap: 'wrap',
+        [theme.breakpoints.down('sm')]: {
+            '& .MuiRating-icon': {
+                fontSize: '1.2rem',
+            },
+        },
+    }));
 
     /*
     This is meant to be embedded on other pages which is why it's called "Lite"

diff --git a/src/styles/components/grids/profile-grid.css b/src/styles/components/grids/profile-grid.css
@@ -74,6 +74,7 @@
   .profile__details {
     margin-top: 1.6rem;
     overflow-x: hidden;
+    max-width: 100%;
     word-wrap: break-word;
     overflow-wrap: break-word;
   }

diff --git a/src/styles/profile/styles.js b/src/styles/profile/styles.js
@@ -5,22 +5,31 @@ export const LayoutContainer = styling(Grid)(({ theme }) => ({
     justifyContent: "center",
     alignItems: "center",
     paddingTop: "6rem",
+    overflowX: "hidden",
+    maxWidth: "100%",
     [theme.breakpoints.down("sm")]: {
         paddingTop: "2rem",
     },
 }));
 
-export const InnerContainer = styling(Grid) ({
-    width: "95%"
-
-})
+export const InnerContainer = styling(Grid)(({ theme }) => ({
+    width: "95%",
+    maxWidth: "100%",
+    boxSizing: "border-box",
+    overflowX: "hidden",
+    [theme.breakpoints.down("sm")]: {
+        width: "100%",
+    },
+}))
 
 export const ProfileAvatar = styling("img")({
   borderRadius: "10rem",
 });
 
 export const ProfileContainer = styling(Grid)(({ theme }) => ({
   padding: "1rem",
+  boxSizing: "border-box",
+  maxWidth: "100%",
   [theme.breakpoints.down("sm")]: {
     padding: "0.5rem",
   },