From cd962ac37a68050a31bd594c3b8d05522051fd37 Mon Sep 17 00:00:00 2001
From: sHa <sha@shadoll.dev>
Date: Mon, 28 Apr 2025 17:17:48 +0300
Subject: [PATCH] feat: Implement logo action buttons for copy and download
 functionality

---
 public/global.css                 |  67 +++++-
 src/App.svelte                    |   9 -
 src/components/LogoActions.svelte | 377 ++++++++++++++++++++++++++++++
 src/components/LogoGrid.svelte    |  98 +-------
 src/components/LogoList.svelte    |  77 +-----
 5 files changed, 445 insertions(+), 183 deletions(-)
 create mode 100644 src/components/LogoActions.svelte

diff --git a/public/global.css b/public/global.css
index fd5ace3..6add607 100644
--- a/public/global.css
+++ b/public/global.css
@@ -60,13 +60,70 @@ button:hover {
   font-size: 1rem;
 }
 
-.copy-btn {
-  background-color: var(--secondary-color);
-  margin-right: 0.5rem;
+.copy-btn,
+.copy-group .png-btn {
+  background-color: var(--secondary-color, #2c3e50);
+  color: #fff;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+  min-width: 2.5em;
+  border-radius: 0;
+  margin: 0;
+  padding: 0.4em 1em;
+  font-size: 0.95em;
+  border-right: 1px solid var(--color-border, #ddd);
+  transition: background 0.2s, color 0.2s;
 }
 
-.download-btn {
-  background-color: #27ae60;
+.copy-btn:last-child,
+.copy-group .png-btn:last-child {
+  border-right: none;
+}
+
+.copy-btn:focus,
+.copy-btn:hover,
+.copy-group .png-btn:focus,
+.copy-group .png-btn:hover {
+  background: #222;
+  color: #fff;
+  outline: none;
+}
+
+.download-btn,
+.download-group .png-btn {
+  background: #27ae60;
+  color: #fff;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+  min-width: 2.5em;
+  border-radius: 0;
+  margin: 0;
+  padding: 0.4em 1em;
+  font-size: 0.95em;
+  border-right: 1px solid var(--color-border, #ddd);
+  transition: background 0.2s, color 0.2s;
+}
+
+.download-btn:last-child,
+.download-group .png-btn:last-child {
+  border-right: none;
+}
+
+.download-btn:focus,
+.download-btn:hover,
+.download-group .png-btn:focus,
+.download-group .png-btn:hover {
+  background: #219150;
+  color: #fff;
+  outline: none;
+}
+
+.copy-group, .download-group {
+  display: inline-flex;
+  border-radius: 6px;
+  overflow: hidden;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
+  margin-right: 0.5em;
 }
 
 /* Direct logo image size constraints that will work with any component structure */
diff --git a/src/App.svelte b/src/App.svelte
index e39dd83..07eeca5 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -52,7 +52,6 @@
   });
 
   $: {
-    console.log('[theme] reactive theme:', theme);
     applyTheme();
   }
 
@@ -108,7 +107,6 @@
       effectiveTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
     }
     document.documentElement.setAttribute('data-theme', effectiveTheme);
-    console.log('[theme] theme:', theme, 'effectiveTheme:', effectiveTheme);
   }
 
   function setTheme(newTheme) {
@@ -492,13 +490,6 @@
     width: 100%;
   }
 
-  .logo-card, .logo-item {
-    background: var(--color-card);
-    color: var(--color-text);
-    border: 1px solid var(--color-border);
-    transition: background 0.2s, color 0.2s;
-  }
-
   :global(.logo-card), :global(.logo-item) {
     background: var(--color-card);
     color: var(--color-text);
diff --git a/src/components/LogoActions.svelte b/src/components/LogoActions.svelte
new file mode 100644
index 0000000..7ae1824
--- /dev/null
+++ b/src/components/LogoActions.svelte
@@ -0,0 +1,377 @@
+<script>
+  export let logo;
+  export let onCopy;
+  export let onDownload;
+
+  // Download menu state
+  let showDownloadMenu = false;
+  let downloadMenuAnchor;
+
+  // Copy menu state
+  let showCopyMenu = false;
+  let copyMenuAnchor;
+
+  function toggleDownloadMenu() {
+    showDownloadMenu = !showDownloadMenu;
+    if (showDownloadMenu) showCopyMenu = false;
+  }
+  function closeDownloadMenu() {
+    showDownloadMenu = false;
+  }
+  function toggleCopyMenu() {
+    showCopyMenu = !showCopyMenu;
+    if (showCopyMenu) showDownloadMenu = false;
+  }
+  function closeCopyMenu() {
+    showCopyMenu = false;
+  }
+
+  // Native click outside handler for both menus
+  function handleClick(event) {
+    if (showDownloadMenu && downloadMenuAnchor && !downloadMenuAnchor.contains(event.target)) {
+      closeDownloadMenu();
+    }
+    if (showCopyMenu && copyMenuAnchor && !copyMenuAnchor.contains(event.target)) {
+      closeCopyMenu();
+    }
+  }
+
+  $: if (showDownloadMenu || showCopyMenu) {
+    window.addEventListener('click', handleClick);
+  } else {
+    window.removeEventListener('click', handleClick);
+  }
+
+  function canCopyPng() {
+    return !!(navigator.clipboard && typeof window.ClipboardItem === 'function');
+  }
+
+  function getSvgSize(svgText) {
+    // Try to extract width/height from SVG attributes
+    const widthMatch = svgText.match(/width=["']([0-9.]+)(px)?["']/i);
+    const heightMatch = svgText.match(/height=["']([0-9.]+)(px)?["']/i);
+    if (widthMatch && heightMatch) {
+      return { width: parseFloat(widthMatch[1]), height: parseFloat(heightMatch[1]) };
+    }
+    // Fallback: parse viewBox
+    const viewBoxMatch = svgText.match(/viewBox=["']([0-9.\s]+)["']/i);
+    if (viewBoxMatch) {
+      const parts = viewBoxMatch[1].split(/\s+/);
+      if (parts.length === 4) {
+        return { width: parseFloat(parts[2]), height: parseFloat(parts[3]) };
+      }
+    }
+    // Default fallback
+    return { width: 256, height: 256 };
+  }
+
+  function downloadPng(logo) {
+    if (logo.format !== 'SVG') return;
+    fetch(logo.path)
+      .then(res => res.text())
+      .then(svgText => {
+        const svg = new Blob([svgText], { type: 'image/svg+xml' });
+        const url = URL.createObjectURL(svg);
+        const img = new window.Image();
+        const { width, height } = getSvgSize(svgText);
+        img.onload = function () {
+          const canvas = document.createElement('canvas');
+          canvas.width = width || img.width;
+          canvas.height = height || img.height;
+          const ctx = canvas.getContext('2d');
+          ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+          canvas.toBlob(blob => {
+            const a = document.createElement('a');
+            a.href = URL.createObjectURL(blob);
+            a.download = logo.name.replace(/\s+/g, '_').toLowerCase() + '.png';
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
+            URL.revokeObjectURL(url);
+          }, 'image/png');
+        };
+        img.onerror = function () {
+          alert('Failed to convert SVG to PNG.');
+        };
+        img.src = url;
+      });
+  }
+
+  function downloadJpg(logo) {
+    if (logo.format !== 'SVG') return;
+    fetch(logo.path)
+      .then(res => res.text())
+      .then(svgText => {
+        const svg = new Blob([svgText], { type: 'image/svg+xml' });
+        const url = URL.createObjectURL(svg);
+        const img = new window.Image();
+        const { width, height } = getSvgSize(svgText);
+        img.onload = function () {
+          const canvas = document.createElement('canvas');
+          canvas.width = width || img.width;
+          canvas.height = height || img.height;
+          const ctx = canvas.getContext('2d');
+          ctx.fillStyle = '#fff'; // white background for JPG
+          ctx.fillRect(0, 0, canvas.width, canvas.height);
+          ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+          canvas.toBlob(blob => {
+            const a = document.createElement('a');
+            a.href = URL.createObjectURL(blob);
+            a.download = logo.name.replace(/\s+/g, '_').toLowerCase() + '.jpg';
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
+            URL.revokeObjectURL(url);
+          }, 'image/jpeg', 0.92);
+        };
+        img.onerror = function () {
+          alert('Failed to convert SVG to JPG.');
+        };
+        img.src = url;
+      });
+  }
+
+  function copyPngToClipboard(logo) {
+    if (logo.format !== 'SVG') return;
+    if (!canCopyPng()) {
+      alert('Clipboard image copy is not supported in this browser. This feature requires HTTPS and a supported browser (Chrome 76+, Edge 79+, Safari 14+).');
+      return;
+    }
+    fetch(logo.path)
+      .then(res => res.text())
+      .then(svgText => {
+        const svg = new Blob([svgText], { type: 'image/svg+xml' });
+        const url = URL.createObjectURL(svg);
+        const img = new window.Image();
+        img.crossOrigin = 'anonymous';
+        const { width, height } = getSvgSize(svgText);
+        img.onload = function () {
+          const canvas = document.createElement('canvas');
+          canvas.width = width || img.width;
+          canvas.height = height || img.height;
+          const ctx = canvas.getContext('2d');
+          ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+          canvas.toBlob(blob => {
+            if (!blob || blob.size === 0) {
+              alert('Failed to create PNG blob. (Blob is empty, possibly due to CORS or Safari bug)');
+              URL.revokeObjectURL(url);
+              return;
+            }
+            (async () => {
+              try {
+                await navigator.clipboard.write([
+                  new window.ClipboardItem({ 'image/png': blob })
+                ]);
+                alert('PNG image copied to clipboard!');
+              } catch (err) {
+                if (err && err.name === 'NotAllowedError') {
+                  alert('Clipboard access was denied. Please check your browser permissions, use HTTPS, and ensure you are clicking the button directly.');
+                } else {
+                  alert('Failed to copy PNG image. This feature requires HTTPS and a supported browser (Chrome 76+, Edge 79+, Safari 14+). If you are on Safari, check CORS and try reloading the page.');
+                }
+              }
+              URL.revokeObjectURL(url);
+            })();
+          }, 'image/png');
+        };
+        img.onerror = function (e) {
+          alert('Failed to convert SVG to PNG.');
+          URL.revokeObjectURL(url);
+        };
+        img.src = url;
+      });
+  }
+
+  function handleCopyPngClick(e) {
+    e.stopPropagation();
+    console.log('Copy as PNG clicked', logo);
+    try {
+      copyPngToClipboard(logo);
+    } catch (err) {
+      console.error('copyPngToClipboard error:', err);
+    }
+    closeCopyMenu();
+  }
+
+  function handleDownloadPngClick(e) {
+    e.stopPropagation();
+    console.log('Download PNG clicked', logo);
+    try {
+      downloadPng(logo);
+    } catch (err) {
+      console.error('downloadPng error:', err);
+    }
+    closeDownloadMenu();
+  }
+
+  function handleDownloadJpgClick(e) {
+    e.stopPropagation();
+    console.log('Download JPG clicked', logo);
+    try {
+      downloadJpg(logo);
+    } catch (err) {
+      console.error('downloadJpg error:', err);
+    }
+    closeDownloadMenu();
+  }
+</script>
+
+<span class="action-group">
+  <button class="copy-btn" on:click={() => onCopy(logo.path)}>
+    Copy URL
+  </button>
+  {#if logo.format === 'SVG'}
+    <button class="menu-btn" bind:this={copyMenuAnchor} aria-label="More copy options" on:click={toggleCopyMenu}>
+      <svg width="18" height="18" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="4" r="1.5" fill="currentColor"/><circle cx="10" cy="10" r="1.5" fill="currentColor"/><circle cx="10" cy="16" r="1.5" fill="currentColor"/></svg>
+    </button>
+    {#if showCopyMenu}
+      <div class="dropdown-menu">
+        <button class="dropdown-item" on:click={handleCopyPngClick}>
+          Copy as PNG
+        </button>
+      </div>
+    {/if}
+  {/if}
+</span>
+
+<span class="action-group download-group">
+  <button class="download-btn" on:click={() => onDownload(logo.path, logo.name)}>
+    Download
+  </button>
+  {#if logo.format === 'SVG'}
+    <button class="menu-btn" bind:this={downloadMenuAnchor} aria-label="More download options" on:click={toggleDownloadMenu}>
+      <svg width="18" height="18" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="4" r="1.5" fill="currentColor"/><circle cx="10" cy="10" r="1.5" fill="currentColor"/><circle cx="10" cy="16" r="1.5" fill="currentColor"/></svg>
+    </button>
+    {#if showDownloadMenu}
+      <div class="dropdown-menu">
+        <button class="dropdown-item" on:click={handleDownloadPngClick}>
+          Download PNG
+        </button>
+        <button class="dropdown-item" on:click={handleDownloadJpgClick}>
+          Download JPG
+        </button>
+      </div>
+    {/if}
+  {/if}
+</span>
+
+<style>
+  .action-group {
+    display: inline-flex;
+    align-items: center;
+    position: relative;
+    border-radius: 6px;
+    overflow: visible;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
+    margin-right: 0.5em;
+  }
+  .copy-btn {
+    background: var(--secondary-color, #2c3e50);
+    color: #fff;
+    font-weight: 500;
+    letter-spacing: 0.02em;
+    min-width: 4em;
+    border-radius: 6px 0 0 6px;
+    margin: 0;
+    padding: 0.4em 1em;
+    font-size: 0.95em;
+    border: none;
+    transition: background 0.2s, color 0.2s;
+  }
+  .copy-btn:focus,
+  .copy-btn:hover {
+    background: #222;
+    color: #fff;
+    outline: none;
+  }
+  .download-btn {
+    background: #27ae60;
+    color: #fff;
+    font-weight: 500;
+    letter-spacing: 0.02em;
+    min-width: 4em;
+    border-radius: 6px 0 0 6px;
+    margin: 0;
+    padding: 0.4em 1em;
+    font-size: 0.95em;
+    border: none;
+    transition: background 0.2s, color 0.2s;
+  }
+  .download-btn:focus,
+  .download-btn:hover {
+    background: #219150;
+    color: #fff;
+    outline: none;
+  }
+  /* Menu button for copy group: secondary color */
+  .action-group:first-of-type .menu-btn {
+    background: var(--secondary-color, #2c3e50);
+    color: #fff;
+  }
+  .action-group:first-of-type .menu-btn:focus,
+  .action-group:first-of-type .menu-btn:hover {
+    background: #222;
+    color: #fff;
+  }
+  /* Menu button for download group: green */
+  .action-group:last-of-type .menu-btn {
+    background: #27ae60;
+    color: #fff;
+  }
+  .action-group:last-of-type .menu-btn:focus,
+  .action-group:last-of-type .menu-btn:hover {
+    background: #219150;
+    color: #fff;
+  }
+  .menu-btn {
+    border: none;
+    border-left: 1px solid var(--color-border, #ddd);
+    border-radius: 0 6px 6px 0;
+    padding: 0.4em 0.7em;
+    font-size: 0.95em;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    margin: 0;
+    height: auto;
+    min-height: unset;
+    line-height: 1.5;
+    transition: background 0.2s, color 0.2s;
+    /* Visual separator between main button and menu */
+  }
+  .dropdown-menu {
+    position: absolute;
+    top: 110%;
+    right: 0;
+    min-width: 160px;
+    background: var(--color-card, #fff);
+    color: var(--color-text, #222);
+    border: 1px solid var(--color-border, #ddd);
+    border-radius: 8px;
+    box-shadow: 0 2px 16px 4px rgba(0,0,0,0.18);
+    z-index: 9999;
+    padding: 0.3em 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.1em;
+    pointer-events: auto;
+  }
+  .dropdown-item {
+    background: none;
+    color: inherit;
+    border: none;
+    text-align: left;
+    padding: 0.6em 1em;
+    font-size: 0.98em;
+    cursor: pointer;
+    transition: background 0.2s, color 0.2s;
+    border-radius: 4px;
+    pointer-events: auto;
+  }
+  .dropdown-item:focus,
+  .dropdown-item:hover {
+    background: var(--color-accent, #4f8cff);
+    color: #fff;
+    outline: none;
+  }
+</style>
diff --git a/src/components/LogoGrid.svelte b/src/components/LogoGrid.svelte
index d66e172..51bf177 100644
--- a/src/components/LogoGrid.svelte
+++ b/src/components/LogoGrid.svelte
@@ -1,5 +1,6 @@
 <script>
   import LogoModal from './LogoModal.svelte';
+  import LogoActions from './LogoActions.svelte';
 
   export let logos = [];
   export let onCopy;
@@ -16,38 +17,6 @@
   function closeModal() {
     showModal = false;
   }
-
-  function downloadPng(logo) {
-    // Only for SVG
-    if (logo.format !== 'SVG') return;
-    fetch(logo.path)
-      .then(res => res.text())
-      .then(svgText => {
-        const svg = new Blob([svgText], { type: 'image/svg+xml' });
-        const url = URL.createObjectURL(svg);
-        const img = new window.Image();
-        img.onload = function () {
-          const canvas = document.createElement('canvas');
-          canvas.width = img.width;
-          canvas.height = img.height;
-          const ctx = canvas.getContext('2d');
-          ctx.drawImage(img, 0, 0);
-          canvas.toBlob(blob => {
-            const a = document.createElement('a');
-            a.href = URL.createObjectURL(blob);
-            a.download = logo.name.replace(/\s+/g, '_').toLowerCase() + '.png';
-            document.body.appendChild(a);
-            a.click();
-            document.body.removeChild(a);
-            URL.revokeObjectURL(url);
-          }, 'image/png');
-        };
-        img.onerror = function () {
-          alert('Failed to convert SVG to PNG.');
-        };
-        img.src = url;
-      });
-  }
 </script>
 
 <LogoModal show={showModal} logo={selectedLogo} on:close={closeModal} />
@@ -69,19 +38,7 @@
         <h3>{logo.name}</h3>
         <p>Format: {logo.format}</p>
         <div class="logo-actions">
-          <button class="copy-btn" on:click={() => onCopy(logo.path)}>
-            Copy URL
-          </button>
-          <span class="download-group">
-            <button class="download-btn" on:click={() => onDownload(logo.path, logo.name)}>
-              Download
-            </button>
-            {#if logo.format === 'SVG'}
-              <button class="download-btn png-btn" on:click={() => downloadPng(logo)}>
-                PNG
-              </button>
-            {/if}
-          </span>
+          <LogoActions {logo} {onCopy} {onDownload} />
         </div>
       </div>
     </div>
@@ -96,14 +53,11 @@
     color: var(--color-text);
     border: 1px solid var(--color-border);
     border-radius: 8px;
-    overflow: hidden;
+    /* overflow: hidden; removed to allow dropdown menus to escape the card */
     transition: background 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
     min-width: 320px;
   }
-  :global(.logo-card:hover) {
-    transform: translateY(-5px);
-    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
-  }
+
   .logo-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
@@ -153,50 +107,6 @@
     gap: 0.5em;
     flex-wrap: nowrap;
   }
-  .download-group {
-    display: inline-flex;
-    border-radius: 6px;
-    overflow: hidden;
-    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
-  }
-  .download-group .download-btn {
-    background: #27ae60;
-    color: #fff;
-    font-weight: 500;
-    letter-spacing: 0.02em;
-    min-width: 4em;
-    border-right: 1px solid var(--color-border);
-    border-radius: 0;
-    margin: 0;
-    padding: 0.4em 1em;
-    font-size: 0.95em;
-    transition: background 0.2s, color 0.2s;
-  }
-  .download-group .download-btn:focus,
-  .download-group .download-btn:hover {
-    background: #219150;
-    color: #fff;
-    outline: none;
-  }
-  .download-group .png-btn {
-    background: #27ae60;
-    color: #fff;
-    font-weight: 500;
-    letter-spacing: 0.02em;
-    min-width: 2.5em;
-    border-radius: 0;
-    margin: 0;
-    padding: 0.4em 1em;
-    font-size: 0.95em;
-    border-right: none;
-    transition: background 0.2s, color 0.2s;
-  }
-  .download-group .png-btn:focus,
-  .download-group .png-btn:hover {
-    background: #219150;
-    color: #fff;
-    outline: none;
-  }
   .no-results {
     grid-column: 1 / -1;
     text-align: center;
diff --git a/src/components/LogoList.svelte b/src/components/LogoList.svelte
index b2316d4..ef0ab32 100644
--- a/src/components/LogoList.svelte
+++ b/src/components/LogoList.svelte
@@ -1,5 +1,6 @@
 <script>
   import LogoModal from './LogoModal.svelte';
+  import LogoActions from './LogoActions.svelte';
 
   export let logos = [];
   export let onCopy;
@@ -17,37 +18,6 @@
     showModal = false;
   }
 
-  function downloadPng(logo) {
-    // Only for SVG
-    if (logo.format !== 'SVG') return;
-    fetch(logo.path)
-      .then(res => res.text())
-      .then(svgText => {
-        const svg = new Blob([svgText], { type: 'image/svg+xml' });
-        const url = URL.createObjectURL(svg);
-        const img = new window.Image();
-        img.onload = function () {
-          const canvas = document.createElement('canvas');
-          canvas.width = img.width;
-          canvas.height = img.height;
-          const ctx = canvas.getContext('2d');
-          ctx.drawImage(img, 0, 0);
-          canvas.toBlob(blob => {
-            const a = document.createElement('a');
-            a.href = URL.createObjectURL(blob);
-            a.download = logo.name.replace(/\s+/g, '_').toLowerCase() + '.png';
-            document.body.appendChild(a);
-            a.click();
-            document.body.removeChild(a);
-            URL.revokeObjectURL(url);
-          }, 'image/png');
-        };
-        img.onerror = function () {
-          alert('Failed to convert SVG to PNG.');
-        };
-        img.src = url;
-      });
-  }
 </script>
 
 <LogoModal show={showModal} logo={selectedLogo} on:close={closeModal} />
@@ -70,19 +40,7 @@
         <p>Format: {logo.format}</p>
       </div>
       <div class="logo-actions">
-        <button class="copy-btn" on:click={() => onCopy(logo.path)}>
-          Copy URL
-        </button>
-        <span class="download-group">
-          <button class="download-btn" on:click={() => onDownload(logo.path, logo.name)}>
-            Download
-          </button>
-          {#if logo.format === 'SVG'}
-            <button class="download-btn png-btn" on:click={() => downloadPng(logo)}>
-              PNG
-            </button>
-          {/if}
-        </span>
+        <LogoActions {logo} {onCopy} {onDownload} />
       </div>
     </div>
   {:else}
@@ -145,37 +103,6 @@
     align-items: center;
     gap: 0.5em;
   }
-  .download-group {
-    display: inline-flex;
-    border-radius: 6px;
-    overflow: hidden;
-    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
-  }
-  .download-group button,
-  .download-group .png-btn {
-    background: #27ae60;
-    color: #fff;
-    font-weight: 500;
-    letter-spacing: 0.02em;
-    min-width: 2.5em;
-    border-radius: 0;
-    margin: 0;
-    padding: 0.4em 1em;
-    font-size: 0.95em;
-    border-right: 1px solid var(--color-border);
-    transition: background 0.2s, color 0.2s;
-  }
-  .download-group button:last-child {
-    border-right: none;
-  }
-  .download-group button:focus,
-  .download-group button:hover,
-  .download-group .png-btn:focus,
-  .download-group .png-btn:hover {
-    background: #219150;
-    color: #fff;
-    outline: none;
-  }
   .logo-list {
     display: flex;
     flex-direction: column;