github-issue-tower-defence-management 1.159.0 → 1.161.0

package/src/adapter/entry-points/console/ui/src/features/console/components/detail/ConsoleCommentComposer.test.tsx

@@ -3,37 +3,32 @@ import type { ConsoleComment } from '../../logic/types';
 import {
   appendAttachmentMarkdown,
   ConsoleCommentComposer,
+  insertUploadPlaceholder,
+  removePlaceholder,
+  replacePlaceholderWithMarkdown,
 } from './ConsoleCommentComposer';
 
 jest.mock('../../lib/mermaidLoader', () => ({
   renderMermaidToSvg: jest.fn(async () => '<svg></svg>'),
 }));
 
+const stubSubmit = async (body: string): Promise<ConsoleComment> => ({
+  author: 'HiromiShikata',
+  body,
+  createdAt: '2026-06-19T11:58:00.000Z',
+});
+
 describe('ConsoleCommentComposer', () => {
   it('shows the form when it starts open', () => {
     const { getByPlaceholderText } = render(
-      <ConsoleCommentComposer
-        initiallyOpen
-        onSubmit={async (body) => ({
-          author: 'HiromiShikata',
-          body,
-          createdAt: '2026-06-19T11:58:00.000Z',
-        })}
-      />,
+      <ConsoleCommentComposer initiallyOpen onSubmit={stubSubmit} />,
     );
     expect(getByPlaceholderText('Leave a comment…')).toBeInTheDocument();
   });
 
   it('offers the opening control and hides the form when it starts closed', () => {
     const { queryByPlaceholderText, getByText } = render(
-      <ConsoleCommentComposer
-        initiallyOpen={false}
-        onSubmit={async (body) => ({
-          author: 'HiromiShikata',
-          body,
-          createdAt: '2026-06-19T11:58:00.000Z',
-        })}
-      />,
+      <ConsoleCommentComposer initiallyOpen={false} onSubmit={stubSubmit} />,
     );
     expect(queryByPlaceholderText('Leave a comment…')).toBeNull();
     expect(getByText('💬 Add a comment')).toBeInTheDocument();
@@ -41,14 +36,7 @@ describe('ConsoleCommentComposer', () => {
 
   it('opens the form on the control and closes it again so the body regains the height', () => {
     const { getByText, getByPlaceholderText, queryByPlaceholderText } = render(
-      <ConsoleCommentComposer
-        initiallyOpen={false}
-        onSubmit={async (body) => ({
-          author: 'HiromiShikata',
-          body,
-          createdAt: '2026-06-19T11:58:00.000Z',
-        })}
-      />,
+      <ConsoleCommentComposer initiallyOpen={false} onSubmit={stubSubmit} />,
     );
     fireEvent.click(getByText('💬 Add a comment'));
     expect(getByPlaceholderText('Leave a comment…')).toBeInTheDocument();
@@ -98,30 +86,23 @@ describe('ConsoleCommentComposer', () => {
 
   it('does not render the attach control when no upload handler is given', () => {
     const { queryByText } = render(
-      <ConsoleCommentComposer
-        initiallyOpen
-        onSubmit={async (body) => ({
-          author: 'HiromiShikata',
-          body,
-          createdAt: '2026-06-19T11:58:00.000Z',
-        })}
-      />,
+      <ConsoleCommentComposer initiallyOpen onSubmit={stubSubmit} />,
     );
     expect(queryByText('📎 Attach files')).toBeNull();
   });
 
-  it('uploads a selected file and inserts the returned markdown into the draft', async () => {
+  it('inserts a placeholder when a file upload starts and replaces it on success', async () => {
+    let resolveUpload!: (markdown: string) => void;
     const onUploadFile = jest.fn(
-      async () => '![shot](https://github.com/user-attachments/assets/abc)',
+      () =>
+        new Promise<string>((resolve) => {
+          resolveUpload = resolve;
+        }),
     );
     const { getByPlaceholderText, getByLabelText } = render(
       <ConsoleCommentComposer
         initiallyOpen
-        onSubmit={async (body) => ({
-          author: 'HiromiShikata',
-          body,
-          createdAt: '2026-06-19T11:58:00.000Z',
-        })}
+        onSubmit={stubSubmit}
         onUploadFile={onUploadFile}
       />,
     );
@@ -135,24 +116,98 @@ describe('ConsoleCommentComposer', () => {
     });
     await waitFor(() => {
       expect(textarea.value).toBe(
-        'See the screen:\n![shot](https://github.com/user-attachments/assets/abc)\n',
+        'See the screen:\n\n\n\n![uploading shot.png]()\n',
+      );
+    });
+    resolveUpload('![shot](https://github.com/user-attachments/assets/abc)');
+    await waitFor(() => {
+      expect(textarea.value).toBe(
+        'See the screen:\n\n\n\n![shot](https://github.com/user-attachments/assets/abc)\n',
       );
     });
     expect(onUploadFile).toHaveBeenCalledWith(file);
   });
 
-  it('uploads a pasted file', async () => {
+  it('removes the placeholder and the three empty lines when an upload fails', async () => {
+    let rejectUpload!: (error: Error) => void;
+    const onUploadFile = jest.fn(
+      () =>
+        new Promise<string>((_, reject) => {
+          rejectUpload = reject;
+        }),
+    );
+    const { getByPlaceholderText, getByLabelText, findByRole } = render(
+      <ConsoleCommentComposer
+        initiallyOpen
+        onSubmit={stubSubmit}
+        onUploadFile={onUploadFile}
+      />,
+    );
+    const textarea = getByPlaceholderText(
+      'Leave a comment…',
+    ) as HTMLTextAreaElement;
+    fireEvent.change(textarea, { target: { value: 'See the screen:' } });
+    const file = new File(['binary'], 'shot.png', { type: 'image/png' });
+    fireEvent.change(getByLabelText('Attach files'), {
+      target: { files: [file] },
+    });
+    await waitFor(() => {
+      expect(textarea.value).toContain('![uploading shot.png]()');
+    });
+    rejectUpload(new Error('No GitHub web session is available'));
+    await waitFor(() => {
+      expect(textarea.value).toBe('See the screen:\n');
+    });
+    const alert = await findByRole('alert');
+    expect(alert.textContent).toContain('No GitHub web session is available');
+  });
+
+  it('preserves text typed in the draft while an upload is in flight', async () => {
+    let resolveUpload!: (markdown: string) => void;
+    const onUploadFile = jest.fn(
+      () =>
+        new Promise<string>((resolve) => {
+          resolveUpload = resolve;
+        }),
+    );
+    const { getByPlaceholderText, getByLabelText } = render(
+      <ConsoleCommentComposer
+        initiallyOpen
+        onSubmit={stubSubmit}
+        onUploadFile={onUploadFile}
+      />,
+    );
+    const textarea = getByPlaceholderText(
+      'Leave a comment…',
+    ) as HTMLTextAreaElement;
+    const file = new File(['binary'], 'shot.png', { type: 'image/png' });
+    fireEvent.change(getByLabelText('Attach files'), {
+      target: { files: [file] },
+    });
+    await waitFor(() => {
+      expect(textarea.value).toContain('![uploading shot.png]()');
+    });
+    fireEvent.change(textarea, {
+      target: {
+        value: 'The fix works:\n\n\n\n![uploading shot.png]()\n',
+      },
+    });
+    resolveUpload('![shot](https://github.com/user-attachments/assets/abc)');
+    await waitFor(() => {
+      expect(textarea.value).toBe(
+        'The fix works:\n\n\n\n![shot](https://github.com/user-attachments/assets/abc)\n',
+      );
+    });
+  });
+
+  it('uploads a pasted file and reserves position with a placeholder', async () => {
     const onUploadFile = jest.fn(
       async () => '![pasted](https://github.com/user-attachments/assets/def)',
     );
     const { getByPlaceholderText } = render(
       <ConsoleCommentComposer
         initiallyOpen
-        onSubmit={async (body) => ({
-          author: 'HiromiShikata',
-          body,
-          createdAt: '2026-06-19T11:58:00.000Z',
-        })}
+        onSubmit={stubSubmit}
         onUploadFile={onUploadFile}
       />,
     );
@@ -163,24 +218,20 @@ describe('ConsoleCommentComposer', () => {
     fireEvent.paste(textarea, { clipboardData: { files: [file] } });
     await waitFor(() => {
       expect(textarea.value).toBe(
-        '![pasted](https://github.com/user-attachments/assets/def)\n',
+        '\n\n\n![pasted](https://github.com/user-attachments/assets/def)\n',
       );
     });
     expect(onUploadFile).toHaveBeenCalledWith(file);
   });
 
-  it('uploads a dropped file', async () => {
+  it('uploads a dropped file and reserves position with a placeholder', async () => {
     const onUploadFile = jest.fn(
       async () => '![dropped](https://github.com/user-attachments/assets/ghi)',
     );
     const { getByPlaceholderText } = render(
       <ConsoleCommentComposer
         initiallyOpen
-        onSubmit={async (body) => ({
-          author: 'HiromiShikata',
-          body,
-          createdAt: '2026-06-19T11:58:00.000Z',
-        })}
+        onSubmit={stubSubmit}
         onUploadFile={onUploadFile}
       />,
     );
@@ -191,21 +242,51 @@ describe('ConsoleCommentComposer', () => {
     fireEvent.drop(textarea, { dataTransfer: { files: [file] } });
     await waitFor(() => {
       expect(textarea.value).toBe(
-        '![dropped](https://github.com/user-attachments/assets/ghi)\n',
+        '\n\n\n![dropped](https://github.com/user-attachments/assets/ghi)\n',
       );
     });
     expect(onUploadFile).toHaveBeenCalledWith(file);
   });
 
+  it('removes the placeholder when text was typed into a reserved empty line and the upload fails', async () => {
+    let rejectUpload!: (error: Error) => void;
+    const onUploadFile = jest.fn(
+      () =>
+        new Promise<string>((_, reject) => {
+          rejectUpload = reject;
+        }),
+    );
+    const { getByPlaceholderText, getByLabelText } = render(
+      <ConsoleCommentComposer
+        initiallyOpen
+        onSubmit={stubSubmit}
+        onUploadFile={onUploadFile}
+      />,
+    );
+    const textarea = getByPlaceholderText(
+      'Leave a comment…',
+    ) as HTMLTextAreaElement;
+    const file = new File(['binary'], 'shot.png', { type: 'image/png' });
+    fireEvent.change(getByLabelText('Attach files'), {
+      target: { files: [file] },
+    });
+    await waitFor(() => {
+      expect(textarea.value).toContain('![uploading shot.png]()');
+    });
+    fireEvent.change(textarea, {
+      target: { value: '\n見てください\n\n![uploading shot.png]()\n' },
+    });
+    rejectUpload(new Error('network error'));
+    await waitFor(() => {
+      expect(textarea.value).not.toContain('![uploading shot.png]()');
+    });
+  });
+
   it('shows the upload failure reason when the upload rejects', async () => {
     const { getByLabelText, findByRole } = render(
       <ConsoleCommentComposer
         initiallyOpen
-        onSubmit={async (body) => ({
-          author: 'HiromiShikata',
-          body,
-          createdAt: '2026-06-19T11:58:00.000Z',
-        })}
+        onSubmit={stubSubmit}
         onUploadFile={async () => {
           throw new Error('No GitHub web session is available');
         }}
@@ -219,6 +300,91 @@ describe('ConsoleCommentComposer', () => {
   });
 });
 
+describe('insertUploadPlaceholder', () => {
+  it('writes the placeholder with three empty lines when the draft is empty', () => {
+    expect(insertUploadPlaceholder('', 'shot.png')).toBe(
+      '\n\n\n![uploading shot.png]()\n',
+    );
+  });
+
+  it('normalizes the draft to end with one newline then adds three empty lines before the placeholder', () => {
+    expect(insertUploadPlaceholder('See the screen:', 'shot.png')).toBe(
+      'See the screen:\n\n\n\n![uploading shot.png]()\n',
+    );
+  });
+
+  it('does not double the trailing newline when the draft already ends with one', () => {
+    expect(insertUploadPlaceholder('See the screen:\n', 'shot.png')).toBe(
+      'See the screen:\n\n\n\n![uploading shot.png]()\n',
+    );
+  });
+
+  it('strips multiple trailing newlines before normalizing', () => {
+    expect(insertUploadPlaceholder('See the screen:\n\n', 'shot.png')).toBe(
+      'See the screen:\n\n\n\n![uploading shot.png]()\n',
+    );
+  });
+});
+
+describe('replacePlaceholderWithMarkdown', () => {
+  it('replaces the placeholder line with the returned markdown', () => {
+    const draft = 'See the screen:\n\n\n\n![uploading shot.png]()\n';
+    expect(
+      replacePlaceholderWithMarkdown(
+        draft,
+        'shot.png',
+        '![shot](https://github.com/user-attachments/assets/abc)',
+      ),
+    ).toBe(
+      'See the screen:\n\n\n\n![shot](https://github.com/user-attachments/assets/abc)\n',
+    );
+  });
+
+  it('replaces only the first occurrence when two uploads share the same file name', () => {
+    const draft =
+      'text\n\n\n\n![uploading file.png]()\n\n\n\n![uploading file.png]()\n';
+    expect(
+      replacePlaceholderWithMarkdown(draft, 'file.png', '![img](url)'),
+    ).toBe('text\n\n\n\n![img](url)\n\n\n\n![uploading file.png]()\n');
+  });
+
+  it('falls back to appending when the placeholder is absent', () => {
+    expect(
+      replacePlaceholderWithMarkdown('text\n', 'shot.png', '![shot](url)'),
+    ).toBe('text\n![shot](url)\n');
+  });
+});
+
+describe('removePlaceholder', () => {
+  it('removes the placeholder and the three empty lines added with it', () => {
+    const draft = 'See the screen:\n\n\n\n![uploading shot.png]()\n';
+    expect(removePlaceholder(draft, 'shot.png')).toBe('See the screen:\n');
+  });
+
+  it('leaves the draft empty when the placeholder was inserted into an empty draft', () => {
+    const draft = '\n\n\n![uploading shot.png]()\n';
+    expect(removePlaceholder(draft, 'shot.png')).toBe('');
+  });
+
+  it('returns the draft unchanged when the placeholder is absent', () => {
+    expect(removePlaceholder('text\n', 'shot.png')).toBe('text\n');
+  });
+
+  it('removes the placeholder when text was typed into the second reserved empty line', () => {
+    const draft = '\n見てください\n\n![uploading shot.png]()\n';
+    expect(removePlaceholder(draft, 'shot.png')).not.toContain(
+      '![uploading shot.png]()',
+    );
+  });
+
+  it('removes the placeholder when text was typed into the third reserved empty line', () => {
+    const draft = '\n\n見てください\n![uploading shot.png]()\n';
+    expect(removePlaceholder(draft, 'shot.png')).not.toContain(
+      '![uploading shot.png]()',
+    );
+  });
+});
+
 describe('appendAttachmentMarkdown', () => {
   it('returns the markdown alone when the draft is empty', () => {
     expect(appendAttachmentMarkdown('', '![a](b)')).toBe('![a](b)\n');

package/src/adapter/entry-points/console/ui/src/features/console/components/detail/ConsoleCommentComposer.tsx

@@ -30,6 +30,47 @@ export const appendAttachmentMarkdown = (
   return `${draft}\n${markdown}\n`;
 };
 
+export const insertUploadPlaceholder = (
+  draft: string,
+  fileName: string,
+): string => {
+  const placeholder = `![uploading ${fileName}]()`;
+  const prefix = draft.length === 0 ? '' : draft.replace(/\n*$/, '\n');
+  return `${prefix}\n\n\n${placeholder}\n`;
+};
+
+export const replacePlaceholderWithMarkdown = (
+  draft: string,
+  fileName: string,
+  markdown: string,
+): string => {
+  const placeholder = `![uploading ${fileName}]()`;
+  const index = draft.indexOf(placeholder);
+  if (index === -1) {
+    return appendAttachmentMarkdown(draft, markdown);
+  }
+  return (
+    draft.slice(0, index) + markdown + draft.slice(index + placeholder.length)
+  );
+};
+
+export const removePlaceholder = (draft: string, fileName: string): string => {
+  const placeholder = `![uploading ${fileName}]()`;
+  const index = draft.indexOf(placeholder);
+  if (index === -1) {
+    return draft;
+  }
+  let start = index;
+  let newlinesRemoved = 0;
+  while (newlinesRemoved < 3 && start > 0 && draft[start - 1] === '\n') {
+    start--;
+    newlinesRemoved++;
+  }
+  const trailingNewline = draft[index + placeholder.length] === '\n' ? 1 : 0;
+  const end = index + placeholder.length + trailingNewline;
+  return draft.slice(0, start) + draft.slice(end);
+};
+
 export const ConsoleCommentComposer = ({
   initiallyOpen,
   onSubmit,
@@ -66,12 +107,16 @@ export const ConsoleCommentComposer = ({
       return;
     }
     for (const file of files) {
+      setDraft((previous) => insertUploadPlaceholder(previous, file.name));
       setUploadStatus({ kind: 'uploading', fileName: file.name });
       try {
         const markdown = await onUploadFile(file);
-        setDraft((previous) => appendAttachmentMarkdown(previous, markdown));
+        setDraft((previous) =>
+          replacePlaceholderWithMarkdown(previous, file.name, markdown),
+        );
         setUploadStatus({ kind: 'idle' });
       } catch (error) {
+        setDraft((previous) => removePlaceholder(previous, file.name));
         setUploadStatus({
           kind: 'error',
           message:

package/src/adapter/entry-points/console/ui/src/features/console/lib/mermaidZoom.test.ts

@@ -0,0 +1,88 @@
+import {
+  clampMermaidZoomScale,
+  formatMermaidZoomScale,
+  isMermaidZoomScaleAtMaximum,
+  isMermaidZoomScaleAtMinimum,
+  MERMAID_ZOOM_MAX_SCALE,
+  MERMAID_ZOOM_MIN_SCALE,
+  MERMAID_ZOOM_SCALE_STEP,
+  mermaidZoomCanvasWidth,
+  mermaidZoomScaleIn,
+  mermaidZoomScaleOut,
+} from './mermaidZoom';
+
+describe('clampMermaidZoomScale', () => {
+  it('keeps a scale inside the range untouched', () => {
+    expect(clampMermaidZoomScale(2.5)).toBe(2.5);
+  });
+
+  it('raises a scale below the minimum to the minimum', () => {
+    expect(clampMermaidZoomScale(0.2)).toBe(MERMAID_ZOOM_MIN_SCALE);
+  });
+
+  it('lowers a scale above the maximum to the maximum', () => {
+    expect(clampMermaidZoomScale(12)).toBe(MERMAID_ZOOM_MAX_SCALE);
+  });
+
+  it('falls back to the minimum for a value that is not a number', () => {
+    expect(clampMermaidZoomScale(Number.NaN)).toBe(MERMAID_ZOOM_MIN_SCALE);
+  });
+});
+
+describe('mermaidZoomScaleIn', () => {
+  it('adds one step', () => {
+    expect(mermaidZoomScaleIn(MERMAID_ZOOM_MIN_SCALE)).toBe(
+      MERMAID_ZOOM_MIN_SCALE + MERMAID_ZOOM_SCALE_STEP,
+    );
+  });
+
+  it('stops at the maximum', () => {
+    expect(mermaidZoomScaleIn(MERMAID_ZOOM_MAX_SCALE)).toBe(
+      MERMAID_ZOOM_MAX_SCALE,
+    );
+  });
+});
+
+describe('mermaidZoomScaleOut', () => {
+  it('subtracts one step', () => {
+    expect(mermaidZoomScaleOut(3)).toBe(3 - MERMAID_ZOOM_SCALE_STEP);
+  });
+
+  it('stops at the minimum', () => {
+    expect(mermaidZoomScaleOut(MERMAID_ZOOM_MIN_SCALE)).toBe(
+      MERMAID_ZOOM_MIN_SCALE,
+    );
+  });
+});
+
+describe('zoom boundary reporting', () => {
+  it('reports the minimum boundary', () => {
+    expect(isMermaidZoomScaleAtMinimum(MERMAID_ZOOM_MIN_SCALE)).toBe(true);
+    expect(isMermaidZoomScaleAtMinimum(MERMAID_ZOOM_MIN_SCALE + 0.5)).toBe(
+      false,
+    );
+  });
+
+  it('reports the maximum boundary', () => {
+    expect(isMermaidZoomScaleAtMaximum(MERMAID_ZOOM_MAX_SCALE)).toBe(true);
+    expect(isMermaidZoomScaleAtMaximum(MERMAID_ZOOM_MAX_SCALE - 0.5)).toBe(
+      false,
+    );
+  });
+});
+
+describe('presentation helpers', () => {
+  it('formats the scale as a percentage', () => {
+    expect(formatMermaidZoomScale(1)).toBe('100%');
+    expect(formatMermaidZoomScale(2.5)).toBe('250%');
+  });
+
+  it('derives the canvas width from the scale', () => {
+    expect(mermaidZoomCanvasWidth(1)).toBe('100%');
+    expect(mermaidZoomCanvasWidth(3)).toBe('300%');
+  });
+
+  it('derives the canvas width from a clamped scale', () => {
+    expect(mermaidZoomCanvasWidth(99)).toBe(`${MERMAID_ZOOM_MAX_SCALE * 100}%`);
+  });
+});

package/src/adapter/entry-points/console/ui/src/features/console/lib/mermaidZoom.ts

@@ -0,0 +1,34 @@
+export const MERMAID_ZOOM_MIN_SCALE = 1;
+export const MERMAID_ZOOM_MAX_SCALE = 6;
+export const MERMAID_ZOOM_SCALE_STEP = 0.5;
+
+export const clampMermaidZoomScale = (scale: number): number => {
+  if (Number.isNaN(scale)) {
+    return MERMAID_ZOOM_MIN_SCALE;
+  }
+  if (scale < MERMAID_ZOOM_MIN_SCALE) {
+    return MERMAID_ZOOM_MIN_SCALE;
+  }
+  if (scale > MERMAID_ZOOM_MAX_SCALE) {
+    return MERMAID_ZOOM_MAX_SCALE;
+  }
+  return scale;
+};
+
+export const mermaidZoomScaleIn = (scale: number): number =>
+  clampMermaidZoomScale(clampMermaidZoomScale(scale) + MERMAID_ZOOM_SCALE_STEP);
+
+export const mermaidZoomScaleOut = (scale: number): number =>
+  clampMermaidZoomScale(clampMermaidZoomScale(scale) - MERMAID_ZOOM_SCALE_STEP);
+
+export const isMermaidZoomScaleAtMinimum = (scale: number): boolean =>
+  clampMermaidZoomScale(scale) <= MERMAID_ZOOM_MIN_SCALE;
+
+export const isMermaidZoomScaleAtMaximum = (scale: number): boolean =>
+  clampMermaidZoomScale(scale) >= MERMAID_ZOOM_MAX_SCALE;
+
+export const formatMermaidZoomScale = (scale: number): string =>
+  `${Math.round(clampMermaidZoomScale(scale) * 100)}%`;
+
+export const mermaidZoomCanvasWidth = (scale: number): string =>
+  `${clampMermaidZoomScale(scale) * 100}%`;

package/src/adapter/entry-points/console/ui/src/index.css

@@ -610,6 +610,71 @@ body {
   font-size: 0.8125rem;
 }
 
+.console-mermaid-enlarge {
+  display: block;
+  width: 100%;
+  margin-top: 6px;
+  padding: 10px 12px;
+  background: #21262d;
+  color: #e6edf3;
+  border: 1px solid #30363d;
+  border-radius: 6px;
+  font-size: 0.8125rem;
+}
+
+.console-mermaid-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  background: #0d1117;
+}
+
+.console-mermaid-modal-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border-bottom: 1px solid #30363d;
+}
+
+.console-mermaid-modal-button,
+.console-mermaid-modal-close {
+  min-width: 44px;
+  min-height: 44px;
+  background: #21262d;
+  color: #e6edf3;
+  border: 1px solid #30363d;
+  border-radius: 6px;
+  font-size: 1.125rem;
+}
+
+.console-mermaid-modal-button:disabled {
+  opacity: 0.4;
+}
+
+.console-mermaid-modal-close {
+  margin-left: auto;
+}
+
+.console-mermaid-modal-scale {
+  min-width: 4.5rem;
+  text-align: center;
+  color: #8b949e;
+  font-size: 0.875rem;
+}
+
+.console-mermaid-modal-viewport {
+  flex: 1;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.console-mermaid-modal-canvas {
+  min-width: 100%;
+}
+
 .console-comment {
   padding: 12px 16px;
   margin-bottom: 10px;