various changes

src/components/client/admin/PostEditor.tsx

@@ -61,7 +61,7 @@ export default function PostEditor(props:EditorProps){
         <h2 className="m-2">Project</h2>
         <select onChange={projectSelectionChange} name="projects" id="projects"  defaultValue={props.post?.project?.id} placeholder={props.post?.project?.name} value={projectID} className="m-2">
             <option value={0}>unassigned</option>
-            {props.projects?.map(p=><option value={p.id}>{p.readableIdentifier}</option>)}
+            {props.projects?.map(p=><option key={`projectSelectionOpt-${p.id}`} value={p.id}>{p.readableIdentifier}</option>)}
         </select>
         <h2>Attachments</h2>
         <table className="table table-striped">
@@ -74,18 +74,23 @@ export default function PostEditor(props:EditorProps){
                     let bucketMap:Map<UUID,PostEditorBucket> = new Map(props.post.buckets.map((b)=>[b.id as UUID,b]));
                     let bucketList = [...props.post.buckets.map((b)=>b.id)];
                     return bucketList.map((e)=>{
-                        return <tr><Accordion><AccordionItem eventKey={bucketList.indexOf(e).toString()}><AccordionHeader>{e}</AccordionHeader><AccordionBody><ul>{bucketMap.get(e as UUID)?.attachments.map((attachment)=><li>{attachment.filename}</li>)}</ul></AccordionBody></AccordionItem></Accordion></tr>
+                        return <>
+                        <tr key={`bucketAccordionRow-${bucketList.indexOf(e).toString()}`}><Accordion>
+                            <AccordionItem eventKey={bucketList.indexOf(e).toString()}>
+                                <AccordionHeader>{e}</AccordionHeader>
+                                <AccordionBody>
+                                    
+                                    <ul>
+                                        <li><button className='btn btn-success'>Upload new attachment</button></li>
+                                        { bucketMap.get(e as UUID)?.attachments.map((attachment)=><li key={`listItem-file-${attachment.filename}`}>{attachment.filename}</li>) }
+                                    </ul>
+                                </AccordionBody>
+                            </AccordionItem>
+                        </Accordion></tr></>
                     })
                 })()
             }
-            <tr>
-            <td colSpan={4}>
-                <table className="table mb-0">
-                ...
-                </table>
-            </td>
-            </tr>
-            ...
+           
         </tbody>
         </table>
         <button type="button" className="m-2 btn btn-primary">Preview</button>

src/components/shared/news/article.module.css

@@ -22,4 +22,14 @@
 .summary{
     /* flex-shrink: 1; */
     padding:8px;
-}
+}
+
+.article-content p:has(img){
+    width: 100%;
+    background-color: var(--background-900);
+}
+
+.article-content p img{
+    margin:auto;
+    height: 100%;
+}

src/components/shared/news/article.tsx

@@ -15,7 +15,6 @@ export async function ExampleComponent(){
 
 export default async function Article(params: { id: string|undefined, title: string|undefined, content: string|undefined, date?:string|undefined } ) {
     
-    
     const components = { ExampleComponent }
     
     return (
@@ -26,7 +25,7 @@ export default async function Article(params: { id: string|undefined, title: str
             <div id="tagbar" className="p-5 self-start"><Tagbar/></div>
             
             </div>
-            <div className=".article-content p-5 whitespace-pre">
+            <div className={`${styles['article-content']} p-5 whitespace-pre`}>
             <MDXRemote source={params.content?params.content:""} components={components}/>
             </div>
             <section className=".article-date">{params.date}</section> <br/>