better style

Author: nichoth

src/client/components/item-row.css

@@ -10,10 +10,14 @@
     transition: background-color 0.2s ease;
 
     & .item-controls {
-        width: 20%;
-        display: flex;
-        flex-direction: column;
-        gap: 2rem;
+        max-width: 20%;
+        /* display: flex;
+        gap: 1rem; */
+
+        & .icon {
+            width: 20px;
+            padding: 0;
+        }
     }
 
     & new-tab {
@@ -61,8 +65,11 @@
 
 .item-actions {
     display: flex;
-    gap: 0.5rem;
+    max-width: 100%;
+    gap: 1rem;
     flex-shrink: 0;
+    flex-wrap: wrap;
+    justify-content: flex-end;
 }
 
 .btn-star {

src/client/components/item-row.ts

@@ -99,9 +99,7 @@ export const ItemRow:FunctionComponent<{
                             star
                         </span>
                     </button>
-                </div>
 
-                <div class="item-actions">
                     <button
                         class="icon"
                         onClick=${toggleRead}

src/client/routes/feed-reader.ts

@@ -134,12 +134,11 @@ export const FeedReader:FunctionComponent<{
                         `}
 
                         ${items.value.map(item => html`
-                            <li>
-                            <${ItemRow}
-                                key=${item.id}
-                                item=${item}
-                                state=${state}
-                            />
+                            <li key=${item.id}>
+                                <${ItemRow}
+                                    item=${item}
+                                    state=${state}
+                                />
                             </li>
                         `)}