feat: remove max-width constraints from container elements for full-width layout

2026-06-04 01:21:18 +02:00 · 2026-03-04 19:53:44 +01:00
parent 6d149e967e
commit 3bed57b5e3
18 changed files with 23 additions and 23 deletions
--- a/src/components/ArticleView.tsx
+++ b/src/components/ArticleView.tsx
@@ -117,7 +117,7 @@ export function ArticleView({ post }: ArticleViewProps) {
    <div className="min-h-screen">
      <ArticleProgressBar />
      
-      <article className="container max-w-4xl py-8 px-4 sm:px-6 lg:px-8">
+      <article className="container py-8 px-4 sm:px-6 lg:px-8">
        <Button
          variant="ghost"
          size="sm"
--- a/src/components/ProfileSkeleton.tsx
+++ b/src/components/ProfileSkeleton.tsx
@@ -4,7 +4,7 @@ import { Skeleton } from '@/components/ui/skeleton';
 export function ProfileSkeleton() {
  return (
    <div className="min-h-screen">
-      <div className="container max-w-6xl py-0 md:py-8">
+      <div className="container py-0 md:py-8">
        {/* Banner skeleton */}
        <Skeleton className="h-48 md:h-64 w-full md:rounded-t-lg" />
        
--- a/src/components/ProfileView.tsx
+++ b/src/components/ProfileView.tsx
@@ -78,7 +78,7 @@ export function ProfileView({

  return (
    <div className="min-h-screen">
-      <div className="container max-w-6xl py-0 md:py-8 px-0 md:px-4">
+      <div className="container py-0 md:py-8 px-0 md:px-4">
        {/* Banner */}
        <div className="relative h-48 md:h-64 w-full bg-gradient-to-br from-primary/20 to-primary/5 md:rounded-t-lg overflow-hidden">
          {banner && (
--- a/src/pages/ArticleByDTagPage.tsx
+++ b/src/pages/ArticleByDTagPage.tsx
@@ -16,7 +16,7 @@ export default function ArticleByDTagPage() {
  if (isLoading) {
    return (
      <div className="min-h-screen">
-        <div className="container max-w-4xl py-8 px-4 sm:px-6 lg:px-8">
+        <div className="container py-8 px-4 sm:px-6 lg:px-8">
          <Skeleton className="h-8 w-24 mb-6" />
          <div className="space-y-4">
            <Skeleton className="h-12 w-3/4" />
--- a/src/pages/ArticlePage.tsx
+++ b/src/pages/ArticlePage.tsx
@@ -96,7 +96,7 @@ export default function ArticlePage() {
  if (isLoading) {
    return (
      <div className="min-h-screen">
-        <div className="container max-w-4xl py-8 px-4 sm:px-6 lg:px-8">
+        <div className="container py-8 px-4 sm:px-6 lg:px-8">
          <Skeleton className="h-8 w-24 mb-6" />
          <div className="space-y-4">
            <Skeleton className="h-12 w-3/4" />
--- a/src/pages/BookmarksPage.tsx
+++ b/src/pages/BookmarksPage.tsx
@@ -23,7 +23,7 @@ export function BookmarksPage() {
  const isLoading = isLoadingBookmarks || isLoadingArticles;

  return (
-      <div className="container mx-auto px-4 py-8 max-w-6xl">
+      <div className="container mx-auto px-4 py-8">
        <div className="mb-8">
          <div className="flex items-center gap-3 mb-2">
            <Bookmark className="h-8 w-8 text-primary" />
--- a/src/pages/CreatePostPage.tsx
+++ b/src/pages/CreatePostPage.tsx
@@ -9,7 +9,7 @@ export default function CreatePostPage() {
  });

  return (
-    <div className="container max-w-7xl py-6 px-4 sm:px-6 lg:px-8">
+    <div className="container py-6 px-4 sm:px-6 lg:px-8">
      <ProfessionalBlogPostForm />
    </div>
  );
--- a/src/pages/EditPostPage.tsx
+++ b/src/pages/EditPostPage.tsx
@@ -16,7 +16,7 @@ export default function EditPostPage() {
  }

  return (
-    <div className="container max-w-7xl py-6 px-4 sm:px-6 lg:px-8">
+    <div className="container py-6 px-4 sm:px-6 lg:px-8">
      <ProfessionalBlogPostForm editIdentifier={identifier} />
    </div>
  );
--- a/src/pages/EventPage.tsx
+++ b/src/pages/EventPage.tsx
@@ -91,7 +91,7 @@ export function EventPage({ eventId, relayHints, authorPubkey, kind }: EventPage
  if (isLoading) {
    return (
      <div className="min-h-screen">
-        <div className="container max-w-3xl py-8 px-4">
+        <div className="container py-8 px-4">
          <Skeleton className="h-8 w-24 mb-6" />
          <Card>
            <CardHeader>
@@ -123,7 +123,7 @@ export function EventPage({ eventId, relayHints, authorPubkey, kind }: EventPage

  return (
    <div className="min-h-screen">
-      <div className="container max-w-3xl py-8 px-4">
+      <div className="container py-8 px-4">
        {/* Back button */}
        <Button
          variant="ghost"
--- a/src/pages/FollowingPage.tsx
+++ b/src/pages/FollowingPage.tsx
@@ -27,7 +27,7 @@ export default function FollowingPage() {
  if (!user) {
    return (
      <div className="min-h-screen">
-        <div className="container max-w-6xl py-12 px-4 sm:px-6 lg:px-8">
+        <div className="container py-12 px-4 sm:px-6 lg:px-8">
          <Card className="border-dashed">
            <CardContent className="py-12 px-8 text-center">
              <div className="max-w-sm mx-auto space-y-6">
@@ -51,7 +51,7 @@ export default function FollowingPage() {

  return (
    <div className="min-h-screen">
-      <div className="container max-w-6xl py-8 px-4 space-y-8">
+      <div className="container py-8 px-4 space-y-8">
        {/* Header */}
        <div className="space-y-2">
          <div className="flex items-center gap-3">
--- a/src/pages/HighlightsPage.tsx
+++ b/src/pages/HighlightsPage.tsx
@@ -10,7 +10,7 @@ export default function HighlightsPage() {

  return (
    <div className="min-h-screen">
-      <div className="container max-w-4xl py-8 px-4 sm:px-6 lg:px-8">
+      <div className="container py-8 px-4 sm:px-6 lg:px-8">
        <div className="space-y-6">
          {/* Header */}
          <div className="space-y-2">
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -45,7 +45,7 @@ export default function HomePage() {

  return (
    <div className="min-h-screen">
-      <div className="container max-w-6xl py-8 px-4 sm:px-6 lg:px-8 space-y-12">
+      <div className="container py-8 px-4 sm:px-6 lg:px-8 space-y-12">
        {/* Search bar */}
        <div className="max-w-2xl mx-auto">
          <SearchBar />
--- a/src/pages/Nip05ProfilePage.tsx
+++ b/src/pages/Nip05ProfilePage.tsx
@@ -53,7 +53,7 @@ export default function Nip05ProfilePage() {
  if (isError || !pubkey) {
    return (
      <div className="min-h-screen">
-        <div className="container max-w-6xl py-8">
+        <div className="container py-8">
          <Card className="border-dashed">
            <CardContent className="py-12 px-8 text-center">
              <div className="max-w-sm mx-auto space-y-6">
--- a/src/pages/NotFound.tsx
+++ b/src/pages/NotFound.tsx
@@ -22,7 +22,7 @@ const NotFound = () => {

  return (
    <div className="min-h-screen">
-      <div className="container max-w-6xl py-8 px-4 sm:px-6 lg:px-8">
+      <div className="container py-8 px-4 sm:px-6 lg:px-8">
        <div className="flex items-center justify-center min-h-[calc(100vh-16rem)]">
          <Card className="max-w-2xl w-full border-dashed">
            <CardHeader className="text-center space-y-4 pb-4">
--- a/src/pages/NotePage.tsx
+++ b/src/pages/NotePage.tsx
@@ -90,7 +90,7 @@ export function NotePage({ eventId }: NotePageProps) {
  if (isLoading) {
    return (
      <div className="min-h-screen">
-        <div className="container max-w-2xl py-8 px-4">
+        <div className="container py-8 px-4">
          <Skeleton className="h-8 w-24 mb-6" />
          <Card>
            <CardHeader>
@@ -122,7 +122,7 @@ export function NotePage({ eventId }: NotePageProps) {

  return (
    <div className="min-h-screen">
-      <div className="container max-w-2xl py-8 px-4">
+      <div className="container py-8 px-4">
        {/* Back button */}
        <Button
          variant="ghost"
--- a/src/pages/SearchResultsPage.tsx
+++ b/src/pages/SearchResultsPage.tsx
@@ -42,7 +42,7 @@ export default function SearchResultsPage() {
  if (isLoading) {
    return (
      <div className="min-h-screen">
-        <div className="container max-w-6xl py-8 space-y-8">
+        <div className="container py-8 space-y-8">
        {/* Header */}
        <div className="space-y-4">
          <Button variant="ghost" onClick={() => window.history.back()}>
@@ -74,7 +74,7 @@ export default function SearchResultsPage() {

  return (
    <div className="min-h-screen">
-      <div className="container max-w-6xl py-8 px-4 sm:px-6 lg:px-8 space-y-8">
+      <div className="container py-8 px-4 sm:px-6 lg:px-8 space-y-8">
        {/* Header with back button and search */}
        <div className="space-y-4">
          <Button variant="ghost" onClick={() => window.history.back()}>
--- a/src/pages/SettingsPage.tsx
+++ b/src/pages/SettingsPage.tsx
@@ -26,7 +26,7 @@ export function SettingsPage() {
  };

  return (
-    <div className="container max-w-4xl py-8 px-4">
+    <div className="container py-8 px-4">
      {/* Page Header */}
      <div className="mb-8">
        <div className="flex items-center gap-3 mb-2">
--- a/src/pages/TagPage.tsx
+++ b/src/pages/TagPage.tsx
@@ -42,7 +42,7 @@ export default function TagPage() {
  if (isLoading) {
    return (
      <div className="min-h-screen">
-        <div className="container max-w-6xl py-8 px-4 sm:px-6 lg:px-8 space-y-8">
+        <div className="container py-8 px-4 sm:px-6 lg:px-8 space-y-8">
          {/* Header */}
          <div className="space-y-4">
            <Button variant="ghost" onClick={() => window.history.back()}>
@@ -75,7 +75,7 @@ export default function TagPage() {

  return (
    <div className="min-h-screen">
-      <div className="container max-w-6xl py-8 px-4 sm:px-6 lg:px-8 space-y-8">
+      <div className="container py-8 px-4 sm:px-6 lg:px-8 space-y-8">
        {/* Header with back button */}
        <div className="space-y-4">
          <Button variant="ghost" asChild>