try to fix cahce problem

backend/main.py

@@ -183,6 +183,7 @@ app = FastAPI(
 # Allow CORS from frontend domains
 allowed_origins = [
     "http://localhost:5173",
+    "http://localhost:5174",
     "http://localhost:3000",
     "https://my-recipes.dvirlabs.com",
     "http://my-recipes.dvirlabs.com",
@@ -192,9 +193,8 @@ app.add_middleware(
     CORSMiddleware,
     allow_origins=allowed_origins,
     allow_credentials=True,
-    allow_methods=["GET", "POST", "PUT", "PATCH", "DELETE", "OPTIONS"],
+    allow_methods=["*"],
     allow_headers=["*"],
-    max_age=0,  # Disable CORS preflight caching
 )
 
 
@@ -551,12 +551,6 @@ def delete_grocery_list_endpoint(list_id: int, current_user: dict = Depends(get_
     return
 
 
-@app.options("/grocery-lists/{list_id}/pin")
-async def options_pin_grocery_list(list_id: int):
-    """Handle CORS preflight for pin endpoint"""
-    return Response(status_code=200)
-
-
 @app.patch("/grocery-lists/{list_id}/pin", response_model=GroceryList)
 def toggle_pin_grocery_list_endpoint(list_id: int, current_user: dict = Depends(get_current_user)):
     """Toggle pin status for a grocery list (owner only)"""

frontend/src/App.css

@@ -124,6 +124,18 @@ body {
   }
 }
 
+.content-wrapper {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 1.4rem;
+}
+
+@media (min-width: 960px) {
+  .content-wrapper {
+    display: contents;
+  }
+}
+
 .sidebar,
 .content {
   display: flex;

frontend/src/App.jsx

@@ -373,25 +373,7 @@ function App() {
                 <PinnedGroceryLists onShowToast={addToast} />
               </aside>
             )}
-            <section className="sidebar">
+            <section className="content-wrapper">
-              <RecipeSearchList
-            allRecipes={recipes}
-            recipes={getFilteredRecipes()}
-            selectedId={selectedRecipe?.id}
-            onSelect={setSelectedRecipe}
-            searchQuery={searchQuery}
-            onSearchChange={setSearchQuery}
-            filterMealType={filterMealType}
-            onMealTypeChange={setFilterMealType}
-            filterMaxTime={filterMaxTime}
-            onMaxTimeChange={setFilterMaxTime}
-            filterTags={filterTags}
-            onTagsChange={setFilterTags}
-            filterOwner={filterOwner}
-            onOwnerChange={setFilterOwner}
-          />
-        </section>
-
               <section className="content">
                 {error && <div className="error-banner">{error}</div>}
 
@@ -452,6 +434,26 @@ function App() {
             currentUser={user}
           />
         </section>
+        
+        <section className="sidebar">
+          <RecipeSearchList
+            allRecipes={recipes}
+            recipes={getFilteredRecipes()}
+            selectedId={selectedRecipe?.id}
+            onSelect={setSelectedRecipe}
+            searchQuery={searchQuery}
+            onSearchChange={setSearchQuery}
+            filterMealType={filterMealType}
+            onMealTypeChange={setFilterMealType}
+            filterMaxTime={filterMaxTime}
+            onMaxTimeChange={setFilterMaxTime}
+            filterTags={filterTags}
+            onTagsChange={setFilterTags}
+            filterOwner={filterOwner}
+            onOwnerChange={setFilterOwner}
+          />
+        </section>
+      </section>
           </>
         )}
       </main>

frontend/src/components/NotificationBell.jsx

@@ -221,13 +221,15 @@ function NotificationBell({ onShowToast }) {
           width: 420px;
           max-height: 550px;
           background: var(--panel-bg);
+          backdrop-filter: blur(10px);
           border: 1px solid var(--border-color);
           border-radius: 16px;
-          box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
+          box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
           z-index: 1000;
           display: flex;
           flex-direction: column;
           overflow: hidden;
+          opacity: 0.98;
         }
 
         .notification-header {

frontend/src/components/PinnedGroceryLists.jsx

@@ -55,7 +55,7 @@ function PinnedGroceryLists({ onShowToast }) {
           <h3 className="note-title">{list.name}</h3>
           <ul className="note-items">
             {list.items.length === 0 ? (
-              <li className="empty-note">רשימה ריקה</li>
+              <li className="empty-note">הרשימה ריקה</li>
             ) : (
               list.items.map((item, index) => {
                 const isChecked = item.startsWith("✓ ");

frontend/src/groceryApi.js

@@ -71,10 +71,7 @@ export const deleteGroceryList = async (id) => {
 export const togglePinGroceryList = async (id) => {
   const res = await fetch(`${API_URL}/grocery-lists/${id}/pin`, {
     method: "PATCH",
-    headers: {
+    headers: getAuthHeaders(),
-      ...getAuthHeaders(),
-      "Content-Type": "application/json",
-    },
   });
   if (!res.ok) {
     let errorMessage = "Failed to toggle pin status";