diff --git a/src/components/CombinationGrid/CombinationGrid.css b/src/components/CombinationGrid/CombinationGrid.css index b0bd0dedd4b354af550ce3970e52f541fd66c617..2a727bfa4c69ae9f4337317226933ac6dfbe6a43 100644 --- a/src/components/CombinationGrid/CombinationGrid.css +++ b/src/components/CombinationGrid/CombinationGrid.css @@ -41,13 +41,10 @@ .card-title { color: var(--primary-color); + font-size: 1.1rem; font-weight: 600; margin-bottom: 0.75rem; } - - .card-title h2 { - font-size: 1.1rem; - } .card-description { color: var(--text-secondary); diff --git a/src/components/CombinationGrid/CombinationGrid.jsx b/src/components/CombinationGrid/CombinationGrid.jsx index 18435e4f91c7fff3e2cf83f71cf8e75a05b06dad..fd1c9d7dbaeb57f26510c98f6ed69588d23e6be3 100644 --- a/src/components/CombinationGrid/CombinationGrid.jsx +++ b/src/components/CombinationGrid/CombinationGrid.jsx @@ -11,14 +11,14 @@ const CombinationGrid = ({ combination }) => { {combination.map((combo, index) => ( <div key={index} className="combination-card"> <img src={combo.image_url} alt={combo.title} className="card-image" /> - <div className="card-title"> + <h2 className="card-title"> <div className="part-type"> {combo.partType} </div> - <h2> + <div> {combo.title} - </h2> - </div> + </div> + </h2> <p className="card-description"> {combo.description} </p> diff --git a/src/pages/SearchCombinationPage/components/CombinationBox.jsx b/src/pages/SearchCombinationPage/components/CombinationBox.jsx index bf8e835d32ac24b820df7d11bd51704cdeb16394..2a595caddf545ec6abcfbdbaf4e001758865c2f3 100644 --- a/src/pages/SearchCombinationPage/components/CombinationBox.jsx +++ b/src/pages/SearchCombinationPage/components/CombinationBox.jsx @@ -16,7 +16,11 @@ const CombinationBox = ({ title, combination }) => { image: partData.image_url, title: partData.name, partType: partData.type, - description: partData.description, + description: partData.description + .split('/') + .map(item => item.trim()) + .filter(item => item !== '') + .join(' / '), }; }) );